@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'),local('OpenSans-Light'),url(//fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
    unicode-range: U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'),local('OpenSans-Light'),url(//fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'),local('OpenSans-Light'),url(//fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'),local('OpenSans-Light'),url(//fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTaaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'),local('OpenSans-Light'),url(//fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTf8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
    unicode-range: U+0102-0103,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'),local('OpenSans-Light'),url(//fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
    unicode-range: U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'),local('OpenSans-Light'),url(//fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),local('OpenSans'),url(//fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
    unicode-range: U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),local('OpenSans'),url(//fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),local('OpenSans'),url(//fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),local('OpenSans'),url(//fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),local('OpenSans'),url(//fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
    unicode-range: U+0102-0103,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),local('OpenSans'),url(//fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
    unicode-range: U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),local('OpenSans'),url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'),local('OpenSans-Semibold'),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
    unicode-range: U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'),local('OpenSans-Semibold'),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'),local('OpenSans-Semibold'),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'),local('OpenSans-Semibold'),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'),local('OpenSans-Semibold'),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
    unicode-range: U+0102-0103,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'),local('OpenSans-Semibold'),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
    unicode-range: U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'),local('OpenSans-Semibold'),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'),local('OpenSans-Bold'),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzK-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
    unicode-range: U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'),local('OpenSans-Bold'),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzJX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'),local('OpenSans-Bold'),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'),local('OpenSans-Bold'),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'),local('OpenSans-Bold'),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzP8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
    unicode-range: U+0102-0103,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'),local('OpenSans-Bold'),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzD0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
    unicode-range: U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'),local('OpenSans-Bold'),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000
}


/*div#backlogChallengeModal div#challengeTabContainer {
    overflow-x: hidden;
}*/

.f-left {
    float:left !important;
}
.fc-more-popover .fc-event-container {
    max-height: 200px;
    overflow-y: auto;
}
div .pull-right:not(:last-child), div .pull-left:not(:first-child) {
    margin-left: 5px;
}
#challengeTabContainer .fullScreenInstructions {
    right: 10px;
    top: 10px;
    background-color: #ffffff;
    padding: 5px;
    position: absolute;
    z-index: 99;
    border-radius: 50%;
    box-shadow: 1px 1px 3px 1px #01010136;
    transition: .5s;
    opacity: 0;
    /* height: auto; */
    /* width: 50px; */
}

.challengeInstructions:hover .fullScreenInstructions {
    opacity: 1 !important;
}

#challengeTabContainer .fullScreenInstructions .ctx-btn-fullScreen {
    padding: 0px;
    border: none;
    background-color: #ffffff !important;
    display: inline-block;
    width: 30px;
    height: 30px;
}

    #challengeTabContainer .fullScreenInstructions .ctx-btn-fullScreen:hover {
    }

.fullScreenInstructions.hiddenFullScreen {
    visibility: hidden;
}

.CoursePlayerMainDiv .curriculumFullScreenBtn .fullScreenInstructions {
    width: 100%;
}

.fullScreenInstructions img {
    max-width: 100%;
}

.fullScreenInstructions .ctx-btn-fullScreen.fullscreen:hover, .fullScreenInstructions .ctx-btn-fullScreen.fullscreen:focus {
    background-color: #fff !important;
}

div#tab_challenge_Acc .challengeSide_glob {
    height: calc(100% - 11px);
}

.preview-item-wrapper.fullScreenWindow {
    padding: 0px 15px;
}

.fullScreenWindow iframe.h100 {
    height: 100%;
}

.fullScreenActive .preview-item-wrapper {
    margin: 0;
}

.fullScreenActive .preview-header .preview-right-title, .fullScreenActive .preview-header .complete-button {
    margin-left: 15px;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.fullScreenActive .preview-header {
    background: rgb(249, 249, 249);
    border-bottom: 1px solid #ddd;
    padding: 0;
}


div:not(.fullScreenActive) #curr-preview-content .preview-header .curriculumFullScreenBtn {
    display: none;
}

.CoursePlayerMainDiv.fullScreenActive .preview-right-description .preview-header {
    display: none;
}

.challengeSide_right:not(.fullScreenWindow) #HomeworkPopupListType {
    margin-top: -55px;
    margin-right: 50px;
}

.CoursePlayerMainDiv .curriculumFullScreenBtn {
    display: inline-block;
    width: 60px;
    height: 60px;
    float: right;
    text-align: center;
    border-left: 1px solid #ddd;
    text-decoration: none;
    color: #222;
}

.CoursePlayerMainDiv .preview-header * {
    margin: 0;
}

.curriculumFullScreenBtn .ctx-btn-fullScreen {
    margin: 10px auto;
}

.preview-right-nav {
    padding: 15px;
}


.curriculumFullScreenBtn {
    text-align: center;
    padding: 4px 0px;
}

#codeEditorControlsDiv {
    min-height: 30px;
}

    #codeEditorControlsDiv .FullScreenTodo {
        color: var(--color-white) !important;
    }

.preview-item-wrapper.fullScreenWindow, .fullScreenWindow .ctx-ContainerCode, .challengeSide_target.challengeSide_right.fullScreenWindow {
    background-color: #fff;
}

    .preview-item-wrapper.fullScreenWindow .preview-right-nav, .challengeSide_target.challengeSide_right.fullScreenWindow .preview-header {
        display: none;
    }

body {
    background-color: #eff3f8 !important;    
}

div#MainAppContentAjax {
    font-size: 14px !important;
}

.select2-container--bootstrap.input-validation-error span.select2-selection.select2-selection--single {
    background-color: transparent;
}

div.page-content-wrapper, div#blockUILoadingDiv {
    height: 100%;
    overflow: hidden;
    padding: 0 !important;
}

.page-content-inner {
    background-color: transparent !important;
}

div#layoutid {
    padding-top: 7px;
    padding-bottom: 15px;
    padding-left: 1px !important;
    padding-right: 1px !important;
    overflow: auto !important;
    height: 100%;
    overflow-x: hidden !important;
    background: var(--color-white);
}

html, body {
    height: 100%;
}

div#appbody {
    height: 100%;
    overflow: hidden;
}

html {
    box-sizing: border-box;
}

.buttonBox-outer {
    position: relative;
}
.stdGrid_dropdown .stdDD_Icon {
    font-size: 12px;
    padding-top: 3px;
    color: var(--primary-color) !important;
}
.dropdown-menu.appendedMenu {
    box-shadow: rgba(117, 53, 0, 0.1) 3px 3px 4px 1px !important;
}
.addendanceInfoDropdown .dropdown-menu {
    position:fixed;
    margin: 0 !important;
    max-height: 220px;
    overflow-y: auto;
    padding: 5px;
    box-shadow: rgba(117, 53, 0, 0.1) 3px 3px 4px 1px !important;
}
    .addendanceInfoDropdown .dropdown-menu li a {
        margin: 0;
        padding: 8px;
        white-space: nowrap;
        display: flex;
        flex-wrap: nowrap;
        text-align: left;
        align-items: center;
    }
        .addendanceInfoDropdown .dropdown-menu li a .description {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            flex: 1;
            gap:5px;
        }
        .addendanceInfoDropdown .stdAction_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent !important;
    border-radius: 50%;
    margin: 2px;
    padding-top: 7px !important;
    color: #ccc !important;
}

    .addendanceInfoDropdown .stdAction_btn:hover {
        background-color: transparent !important;
        color: #ccc !important;
    }


.ActionOnHover .dropdown-menu {
    width: auto;
    right: -12px;
    left: auto;
    margin: 0 !important;
    max-height: 220px;
    overflow-y: auto;
    padding: 5px;
    box-shadow: rgba(117, 53, 0, 0.1) 3px 3px 4px 1px !important;
}
.ActionOnHover ul.dropdown-menu li a {
    margin: 0;
    padding: 8px;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    text-align: left;
    align-items:center;    
}

.stdAction_btns i {
    margin-left: 4px;
}
.stdGrid_dropdown .stdDD_Icon {
    width: 26px;
    height: 16px;
    display: flex;
    justify-content: center;
    margin-left: -7px; 
}
.addendanceInfoDropdown .dropdown-menu a [class^="ctxicon-"], .addendanceInfoDropdown .dropdown-menu a [class*=" ctxicon-"] {
    width: 26px;
    height: 16px;
    display: flex;
    justify-content: center;
    margin-left: -7px;
    color: var(--primary-color);
}
.absentPresentWrapper [class^="ctxicon-"], .absentPresentWrapper [class*=" ctxicon-"]{
    height: 28px;
    width: 28px;
    display: inline-block;
}
ul.dropdown-menu.stdGrid_dropdown li {
    position: relative;
    text-align: left;
}


.btn-group > .dropdown-menu.stdGrid_dropdown:after {
    display: none;
}
.btn-group > .dropdown-menu.stdGrid_dropdown:before {
    display: none;
}

ul.StdSub_menu.dropdown-menu {
    padding: 5px;
    overflow-y: auto;
    max-height: 220px;
    position: absolute;
    left: auto;
    right: 100%;
    top: 0;
    bottom: auto;
    box-shadow: rgba(117, 53, 0, 0.1) 3px 3px 4px 1px;
    width: auto;
    z-index: 9999;
    margin: 0;
}

ul.StdSub_menu.dropdown-menu li a[disabled] {
    pointer-events: none;
    cursor: not-allowed;
}
.actionDropdownSubmenu{
    position:absolute;
}


.readable--age--text--span {
    position: absolute;
    right: 5px;
    z-index: 999999;
    line-height: 2.7;
    top: 0;
}
@media (min-width:768px) {
    nav.navbar.navbar-default.ctx-large-nav {
        display: flex;
        white-space: nowrap;
    }
    div#slide-navbar-collapse {
        display: flex !important;
        white-space: nowrap;
        flex: 1 1 auto;
    }
    div#slide-navbar-collapse ul.nav.navbar-nav {
        display: flex;
        flex-wrap: nowrap;
    }   


    ul#mainMenuContainer.nav.navbar-nav {
        flex: 1;
    }
        /*ul#mainMenuContainer.nav.navbar-nav:has(:only-child) {
            visibility:hidden;
        }*/

        ul#mainMenuContainer.nav.navbar-nav:has(:not(:only-child) ) {
            visibility: visible;
        }       
}
@media (max-width:1170px) {
    .ctx-menu-lg .nav > li {
        margin-left: 0;
    }
    .ctx-menu-lg .nav > li > a {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
    @media screen and (min-width: 767px) {
        .page-container.sizeContainer {
            height: calc(100% - 105px) !important;
        }
    }

    .page-container.sizeContainer {
        height: 100%;
    }

    .page-content {
        background: var(--color-white) !important;
        padding: 4px;
    }

    #slide-navbar-collapse li a, .ctx-nav-right li a, .table td, .table th, .select2-container--bootstrap .select2-selection--single .select2-selection__rendered .dataTables_paginate, .dataTables_length > label, .dataTables_info {
        font-size: 14px !important;
    }

    .scrollbarproperty::-webkit-scrollbar {
        width: 7px;
        height: 12px;
    }

    .ctx-usr-name {
        display: none;
    }

    @media only screen and (max-width: 767px) {
        #slide-navbar-collapse {
            position: fixed;
            top: 0;
            padding: 0;
            z-index: 99;
            width: 280px;
            height: calc(100% - 50px);
            background-color: var(--primary-color);
            overflow: auto;
            border: 0;
        }

            /*for small screens menu bar*/
            #slide-navbar-collapse.small-screens-menu {
                display: block;
                top: auto;
                width: 100%;
                right: 110%;
                transition: .5s ease;
            }

        .menu-overlay {
            display: none;
            background-color: var(--color-black);
            bottom: 0;
            left: 0;
            opacity: 0.5;
            filter: alpha(opacity=50);
            position: fixed;
            right: 0;
            top: 0;
            z-index: 49;
        }

        #slide-navbar-collapse .ctx-navlist-left, #slide-navbar-collapse .ctx-nav-right {
            display: inline-grid;
            position: relative;
            width: 100%;
            margin: 0 !important;
        }

        #slide-navbar-collapse .dropdown-menu-large:not(#boardmenuli) .dropdown-menu-large {
            display: none;
        }

        .ctx-menu-lg {
            height: auto !important;
            position: relative !important;
            top: 0 !important;
            width: 100% !important;
        }

        .ctx-opened {
            display: inline-grid !important;
        }

        .projDropdownsm {
            position: relative !important;
        }

        .ctx-navs {
            display: grid !important;
            height: auto !important;
            text-align: left;
        }

            .ctx-navs a {
                padding: 6px 0 6px 13px;
            }

        .ctx-submenu {
            width: 100% !important;
            border-radius: 0 !important;
            position: relative !important;
            box-shadow: none !important;
            border: none !important;
        }

        .ctx-opened {
            text-align: left;
        }

            .ctx-opened .col-md-9 {
                padding: 0 !important;
            }

        .dropdown-submenu a:after {
            position: absolute;
            display: inline-block;
            font-size: 14px;
            right: 7px !important;
            top: 17px !important;
            font-family: FontAwesome;
        }

        .dropdown-submenu:hover > a:after {
            transform: rotate(90deg) !important;
        }

        .ctx-navlist-right {
            border: 0 !important;
        }

            .ctx-navlist-right a {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

        .ctx-usr-name {
            display: inline-block;
        }

        .nav-pills li {
            border-bottom: 1px solid #efefef;
        }
    }

    .ctx-menu-padding {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .ctx-font-large{
        font-size:large !important;
    }

    .ctx-noPadding {
        padding: 0 !important;
    }

    .ctx-noPadding-bottom {
        padding-bottom: 0px !important;
    }

    #projDropdown {
        list-style: none;
        display: inline-grid;
        color: var(--color-white);
        position: relative;
        width: 100% !important;
        padding: 0;
        border: none !important;
        padding: 0;
        padding-left: 0 !important;
    }

        #projDropdown li {
            display: inline-grid;
            position: relative;
        }

        #projDropdown > li > a {
            padding-bottom: 10px;
            padding-top: 10px;
            width: 100%;
            text-decoration: none;
            color: var(--primary-color);
            background-color: var(--color-white);
        }

        #projDropdown li ul {
            display: none;
        }

        #projDropdown li:hover ul {
            display: inline-grid;
            padding: 0;
            position: relative;
            top: 0px !important;
            left: 0 !important;
            border-radius: 0 !important;
        }

    .ctx-submenu-sm, .ctx-submenu-sm .dropdown-menu {
        position: relative !important;
        top: 0px !important;
        left: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
        border: none;
    }

        .ctx-submenu-sm a {
            position: relative;
            top: 1px !important;
            line-height: 1.428571429;
            left: 0 !important;
            font-weight: 400 !important;
            color: var(--color-lightBlack) !important;
            padding-top: 16px !important;
            padding-bottom: 13px !important;
        }

    .ctx-textLeft {
        text-align: left !important;
    }

    .ctx-textRight {
        text-align: right !important;
    }

    #caliGlobe {
        display: none;
    }

    @media only screen and (max-width: 1000px) {
        #caliGlobe {
            display: inline-block;
            margin-top: 6px;
            margin-left: -5px;
            width: 40px;
            height: 40px;
        }

        #caliFullLogo {
            display: none;
        }
        div#slide-navbar-collapse {
            width: 100%;
        }
    }

    @media only screen and (min-width: 769px) {
        .dataTables_wrapper .row + div + div.row .col-md-8, .dataTables_wrapper .row + div + div.row > div {
            display: flex;
            align-items: center;
            width: 100%;
        }
    }

    #adminMEnu ul.nav.nav-pills.ctx-navs li:nth-last-child(-n+4) a {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    @media only screen and (min-width: 767px) and (max-width: 1265px) {
        #adminMEnu ul.nav.nav-pills.ctx-navs li:nth-last-child(-n+4) {
            max-width: 65px;
        }
    }

    @media only screen and (max-width: 767px) {
        #caliFullLogo {
            display: inline-block;
        }

        #caliGlobe {
            display: none;
        }
    }

    .ctx-toggle {
        margin-top: 9px;
        margin-right: 7px;
        border-color: var(--color-white) !important;
        background-color: transparent !important;
    }

        .ctx-toggle span.icon-bar {
            background-color: var(--color-white) !important;
        }

    .ctx-collapse-bar {
        padding: 0;
        border: 0;
    }

        .ctx-collapse-bar, .ctx-collapse-bar ul, .ctx-collapse-bar ul li a {
            border-radius: 0 !important;
        }

    .ctx-nav-responsive {
        min-height: 39px !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .dropdown-large {
        position: static !important;
    }

    .dropdown-menu-large {
        padding: 20px 0px;
    }

        .dropdown-menu-large > li > ul {
            padding: 0;
        }

            .dropdown-menu-large > li > ul > li {
                list-style: none;
            }

                .dropdown-menu-large > li > ul > li > a {
                    display: block;
                    clear: both;
                    line-height: 1.428571429;
                    white-space: normal;
                }

        .dropdown-menu-large > li ul > li > a:hover, .dropdown-menu-large > li ul > li > a:focus {
            text-decoration: none;
            color: #262626;
            background-color: #f5f5f5;
        }

        .dropdown-menu-large .disabled > a, .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus {
            color: #999999;
        }

            .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus {
                text-decoration: none;
                background-color: transparent;
                background-image: none;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
                cursor: not-allowed;
            }

        .dropdown-menu-large .dropdown-header {
            color: var(--primary-color);
            font-size: 18px;
        }

    @media (max-width: 768px) {
        .dropdown-menu-large {
            margin-left: 0;
            margin-right: 0;
        }

        .dataTables_info {
            display: none !important;
        }

        .dropdown-menu-large > li:last-child {
            margin-bottom: 0;
        }

        .dropdown-menu-large .dropdown-header {
            padding: 3px 15px !important;
        }
        .ActionOnHover ul.dropdown-menu li a {
            margin: 0;
        }

    }

    .section {
        margin-top: 50px;
        background: lightblue;
    }

    .ctx-dropdown {
        width: 1291px;
        left: -16.5%;
    }

    .dropdown-menu-large:before {
        content: none !important;
    }

    .arrow-up {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid black;
    }

    .ctx-logo {
        height: 100%;
        background-color: rgb(18, 113, 196);
        padding: 0;
        display: block;
    }

    .ctx-navs {
        margin: 0 !important;
    }

        .ctx-navs li:hover > a .ctx-navs li a:hover, .ctx-navs li:hover > a, .ctx-proj-menu ul li a {
            color: var(--color-black) !important;
            background: transparent !important;
        }

        .ctx-navs .ctx-nav-list .active a, .ctx-navs .ctx-nav-list .active a:hover {
            background: #3c8dbc !important;
            color: var(--color-white) !important;
        }

    .ctx-menu-lg .col-md-10 {
        padding-left: 3%;
    }

    .ctx-setup {
        border-radius: 0;
        border: 0;
        background-color: transparent !important;
        height: 40px;
        padding-top: 14%;
    }

    .ctx-module {
        padding: 0.79%;
        background-color: #367fa9;
        color: var(--color-white);
        font-weight: 600;
        text-transform: uppercase;
        text-align: center;
    }

        .ctx-module:after {
            content: '';
            border-left: 22px solid #367fa9;
            border-top: 20px solid transparent;
            border-bottom: 21px solid transparent;
            position: absolute;
            top: 0;
            left: 100%;
            z-index: 20;
        }

    .ctx-nav-list a:after {
        content: none !important;
    }

    .ctx-large-nav {
        margin: 0;
        border: 0 !important;
        min-height: 51px;
        border-radius: 0 !important;
    }

        .ctx-large-nav .dropdown li:not(.ctx-nav-list) .dropdown-toggle, .ctx-large-nav .dropdown li:not(.ctx-nav-list) .dropdown-toggle:first-child:hover, .ctx-nav-right li a:not(.notif-tab-element):first-child:hover, .ctx-nav-right li a:not(.notif-tab-element):first-child {
            padding-top: 15.5px;
            padding-bottom: 15.5px;
            color: var(--color-dark);
            font-size: 14px;
            font-weight: 500;
            padding-left: 16px !important;
            padding-right: 16px !important;
        }

    .ctx-large-menu {
        padding: 0 !important;
        box-shadow: none !important;
    }

    .ctx-menu-lg {
        position: absolute;
        left: 0;
        padding: 0;
        border: 0;
        top: 51px;
        margin: 0;
        border-radius: 0 !important;
        box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3) !important;
        -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3) !important;
        height: 51px;
    }

        .ctx-menu-lg:after {
            content: none !important;
        }

    .ctx-projects {
        max-height: 198px !important;
        overflow-y: hidden;
    }

        .ctx-projects:hover {
            overflow-y: auto;
        }

        .ctx-menu-lg .nav > li > a, .ctx-projects li:not(.dropdown-header) a {
            font-weight: 400;
            font-size: 14px !important;
            color: var(--color-lightBlack);
            padding: 15px;
            padding-top: 16px !important;
            padding-bottom: 16px !important;
            border-radius: 0 !important;
        }

            .ctx-menu-lg .nav > li > a:hover, .activeLink > a:first-of-type {
                color: var(--primary-color);
                background-color: rgba(211, 211, 211, 0.26);
            }

    .activeLink:after {
        transform: none !important;
        transition: none !important;
        border-bottom: solid 3px rgb(18, 113, 196);
        position: relative;
        top: -2px;
    }

    .ctx-large-nav .dropdown [data-role="dropdown"]:hover {
        background-color: #3c8dbc !important;
        color: var(--color-white) !important;
    }

    #slide-navbar-collapse > .open > a {
        background-color: #367fa9 !important;
    }

    .ctx-nav-lable {
        padding-top: 9px !important;
        padding-bottom: 13.5px !important;
        margin-top: 1.2% !important;
        border-right: 1px solid #e7ecf1 !important;
        background-color: transparent !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        color: var(--color-lightBlack) !important;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .ctx-nav-lable i {
            font-size: 16px;
            color: rgb(18, 113, 196) !important;
            position: relative;
        }

    .ctx-navlist-right .ctx-arrow:hover:before, #slide-navbar-collapse .ctx-dropdown-lg .ctx-arrow:hover:before, #slide-navbar-collapse .open .ctx-arrow:before, .ctx-navlist-right .ctx-arrow:hover:before, .ctx-activate .ctx-arrow:before {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid #1271c4;
        bottom: -1px;
        content: " ";
        border-bottom: 10px solid white;
        height: 0;
        left: 50%;
        margin-left: -10px;
        position: absolute;
        width: 0;
    }

    #slide-navbar-collapse .ctx-dropdown-lg .ctx-arrow {
        color: var(--color-dark) !important;
    }

    #slide-navbar-collapse .open .ctx-arrow, .ctx-navlist-right a:hover, .ctx-usr-profile:hover, #slide-navbar-collapse .open .ctx-usr-profile, #slide-navbar-collapse .ctx-activate .ctx-arrow {
        background-color: transparent !important;
        color: var(--color-white) !important;
    }

    .ctx-submenu li, .ctx-submenu-sm li {
        border-bottom: 1px solid #e7ecf1;
    }

        .ctx-submenu li a {
            color: var(--color-black) !important;
            font-weight: 400 !important;
        }

            .ctx-submenu li a:hover, .ctx-projects li:not(.dropdown-header) a:hover {
                background-color: rgba(211, 211, 211, 0.26) !important;
                -webkit-transition: all 0.4s ease-in-out;
                -moz-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
            }

    .ctx-submenu {
        position: absolute;
        left: 0 !important;
        top: 58px !important;
    }

    .ctx-submenu-lg {
        padding: 7px;
        padding-bottom: 10px;
        height: inherit;
        padding-top: 4px;
    }

    .ctx-navs li:hover:after, .ctx-projects li:not(.dropdown-header):hover:after, .mainProjectSelected:after {
        transform: scaleX(1) !important;
        color: rgb(18, 113, 196);
        top: -3px;
        position: relative;
    }

    .ctx-navs > .ctx-nav-list:hover {
        background-color: rgba(211, 211, 211, 0.26);
    }

    .ctx-nav-list:after, .ctx-projects li:not(.dropdown-header):after, .mainProjectSelected:after {
        display: block;
        content: '';
        border-bottom: solid 3px rgb(18, 113, 196);
        transform: scaleX(0);
        transition: transform 250ms ease-in-out;
    }

    .btn-group:not([data-name="color"]) .dropdown-menu:not(.dropdown-menu-large):not(.stateScroll):not(.multiselect-container) li:hover:after, .dropdown-toggle + .dropdown-menu:not(.dropdown-menu-large) li:not(.dropdown-header):not(.search-item):hover:after, .welcomeContainer .popover-list-item:hover:after {
        transform: scaleX(1) !important;
        color: rgb(18, 113, 196);
        top: -3px;
        position: relative;
    }


    .btn-group:not([data-name="color"]) .dropdown-menu:not(.dropdown-menu-large):not(.stateScroll):not(.multiselect-container) li.open:after, .dropdown-toggle + .dropdown-menu:not(.dropdown-menu-large) li:not(.dropdown-header):not(.search-item).open:after, .welcomeContainer .popover-list-item.open:after {
        transform: scaleX(1) !important;
        color: rgb(18, 113, 196);
        top: -3px;
        position: relative;
    }

    .btn-group:not([data-name="color"]) .dropdown-menu:not(.dropdown-menu-large):not(.stateScroll):not(.multiselect-container) li.open a {
        color: #555;
        background-color: #f6f6f6;
    }

    .btn-group:not([data-name="color"]) .dropdown-menu:not(.dropdown-menu-large):not(.stateScroll):not(.multiselect-container) li:after, .dropdown-toggle:not(.dropdown-menu-large) + .dropdown-menu li:not(.dropdown-header):not(.search-item):after, .welcomeContainer .popover-list-item:after {
        display: block;
        content: '';
        border-bottom: solid 3px rgb(18, 113, 196);
        transform: scaleX(0);
        transition: transform 250ms ease-in-out;
    }

    .ctx-proj-menu {
        position: absolute;
        top: 57px !important;
        left: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3) !important;
        -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3) !important;
    }

    .ctx-proj-col {
        height: 301px !important;
        border-right: 1px solid #e7ecf1;
    }

    .ctx-projects li:not(.dropdown-header) {
        margin-left: 7% !important;
    }

        .ctx-projects li:not(.dropdown-header) a {
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }

    .ctx-projects, .project-heading {
        background-color: transparent !important;
        margin: 5%;
        color: var(--color-black);
        font-size: 15px !important;
        font-weight: bold;
        color: rgb(18, 113, 196);
        margin-left: 5%;
        margin-bottom: 3.5%;
        clear: both;
    }

        .project-heading i {
            font-size: 14px;
            position: relative;
            top: -1px;
        }

        .project-heading .btn-circle {
            border-color: #ccc !important;
            color: rgb(18, 113, 196);
        }

    .ctx-btn-circle:hover, .ctx-btn-circle:focus {
        background-color: var(--primary-color) !important;
        color: var(--color-white);
    }

    .ctx-btn-circle i:before {
        color: inherit;
    }

    .ctx-btn-circle, .ctx-btn-circle-success, .ctx-btn-circle-danger {
        border-radius: 25px;
        border-color: #ccc;
        width: 30px !important;
        height: 30px !important;
        color: #ccc;
    }

        .ctx-btn-circle-success:hover {
            color: var(--color-white) !important;
            background-color: #1fa67a;
            border: none !important;
        }

        .ctx-btn-circle-danger:hover {
            color: var(--color-white) !important;
            background-color: #e7505a !important;
            border: none !important;
        }

        .ctx-btn-circle:active {
            color: #ccc !important;
        }

        .ctx-btn-circle .fa-filter, .ctx-btn-circle .fa-trello, .ctx-btn-circle .fa-cogs {
            position: relative;
        }

        .ctx-btn-circle .fa-cogs {
            left: -1px;
        }

    .btn-group.open .ctx-btn-circle {
        background-color: var(--primary-color) !important;
        color: var(--color-white) !important;
    }

    .ctx-btn-circle .fa-expand, .ctx-btn-circle .fa-compress, .ctx-btn-circle .fa-minus-circle {
        position: relative;
        left: -4px;
        top: -3px;
    }

    .ctx-btn-circle .fa-question {
        font-size: 16px;
        position: relative;
        left: 6px;
    }

    .ctx-btn-circle .fa-info {
        position: relative;
        top: -2px;
    }

    .ctx-nav-lable:after {
        content: "\f105" !important;
        font-size: 20px;
        right: 22px !important;
        transform: rotate(90deg);
        top: 16px !important;
    }

    .ctx-menu-brand {
        font-size: 15px;
        color: var(--color-white) !important;
        letter-spacing: 2px;
    }

        .ctx-menu-brand i {
            font-size: 43px;
        }

    .navbar-brand {
        padding: 8px;
    }

        .navbar-brand > img {
            height: 100%;
            width: auto;
            position: relative;
            margin-top: 0px;
        }

    .ctx-nav-right {
        height: 51px;
    }

    .ctx-navlist-right {
        height: 36px;
        margin-top: 6px;
        border-left: 1px solid #BCC2CB;
    }

        .ctx-navlist-right a {
            padding: 11px 16px 13px 15px !important;
            color: var(--color-dark) !important;
        }

        .ctx-navlist-right > a > i {
            font-size: 18px;
        }

    .ctx-Subnavlist-right li > a:hover {
        background-color: #cccccc !important;
    }

    .ctx-navlist-right .dropdown-menu a {
        color: var(--color-black) !important;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .ctx-navlist-right > ul:before, .ctx-navlist-right > .dropdown-menu:after {
        content: none !important;
    }

    .ctx-opened-temp {
    }

    .ctx-opened {
        display: block !important;
        opacity: 0;
    }

    .ctx-stickyMenu {
        background-color: #eff3f8;
        height: 51px !important;
    }

    .fixed-me {
        position: fixed;
        top: 0;
        z-index: 1000;
        transition: all 1s;
    }

    .navbar-me {
        background-color: var(--primary-color) !important;
        width: 100%;
        transition: all 1s;
    }

    .boardMenu .ctx-links:after {
        content: "\f105" !important;
        font-size: 15px;
        right: 0px !important;
        transform: rotate(90deg);
        top: 16px !important;
    }

    .ctx-align-center .ctx-navs {
        display: inline-block;
    }

    .ctx-align-center {
        text-align: center;
        height: 51px;
    }

        .ctx-align-center col-md-3 {
            text-align: left;
        }

    .mainProjectSelected a {
        color: var(--color-white) !important;
    }

    .mainProjectSelected {
        color: var(--color-white) !important;
        background-color: rgba(211, 211, 211, 0.26);
    }

    .ctx-submenu .nav-link {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .table > thead > tr > th, table.dataTable thead td, table.dataTable thead th {
        border-bottom: 0 !important;
    }

    .table > thead > tr:first-of-type {
        background-color: #eff3f8;
    }

        .table > thead > tr:first-of-type th:hover {
            background-color: #d4d7da;
        }

    .table tbody td .label.label-sm, .table tbody td .label-info {
        font-size: 12px !important;
        color: var(--color-white);
        margin-right: 3%;
    }

    .dataTables_wrapper .row:nth-child(1) {
        display: none !important;
    }

    div.dataTables_length label {
        text-transform: lowercase !important;
        color: var(--color-lightBlack) !important;
    }

    .dataTables_length label select {
        margin-left: 5px;
        margin-right: 5px;
    }

.table > thead > tr:first-of-type th, .table:not(#tblNewRetrospective,#tabletaskboard,.td-elipeses-0) > tbody tr td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    max-width: 350px;
}
.table > thead > tr:first-of-type th, .table:not(#tblNewRetrospective,#tabletaskboard) > tbody tr td {
    white-space: nowrap;
    max-width: 350px;
}

    .dataTables_empty {
        text-align: center !important;
    }

    #tblNewRetrospective > tbody tr td:not(:last-child) {
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .input-inline {
        width: auto !important;
    }

    .dataTables_length label {
        padding-top: 0 !important;
    }

    .select2-container--bootstrap.input-validation-error span.select2-selection.select2-selection--single {
        background-color: transparent;
    }

    #appbody .select2-container--bootstrap .select2-selection, #appbody .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
        font-weight: 500;
        font-family: inherit;
    }

    .select2-container--bootstrap .select2-results__group {
        color: var(--color-lightBlack);
        text-transform: uppercase;
        background: #E0E0E0;
    }

    ul.multiselect-container li label.checkbox div.checker {
        display: inline-block;
    }

    .multiselect-container > li > a > label {
        padding-left: 8px !important;
    }

    .multiselect-native-select .dropdown-menu {
        box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
        background-color: #FAFAFA;
        border: 2px solid #F5F5F5 !important;
    }

    .multiselect-native-select .open:before {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid #1271c4;
        bottom: -10.5px;
        content: " ";
        border-bottom: 10px solid #F5F5F5;
        height: 0;
        left: 22px;
        margin-left: -16px;
        position: absolute;
        width: 0;
        z-index: 1037;
    }

    .ctx-dropdown-lg .dropdown-menu {
        z-index: 999;
    }


    .ctx-btn-circle .fa-angle-up {
        position: relative;
        top: -3px;
    }

    .ctx-btn-circle .fa-angle-down {
        position: relative;
        top: -2px;
    }

    .ctx-btn-circle .fa-toggle-off, .ctx-btn-circle .fa-toggle-on {
        position: relative;
        left: 0px;
        top: -3px;
    }

    .ctx-btn-circle .fa-file-pdf-o {
        position: relative;
        top: -2px;
        left: 1px;
    }

    .ctx-btn-circle i.fa.fa-sitemap {
        position: relative;
        top: -3px;
    }

    .table > thead > tr:nth-child(2) {
        display: none;
    }

    .table > thead > tr:nth-child(1) {
        color: var(--color-tableTh) !important;
    }

    .table > thead > tr:first-of-type th {
        font-weight: bold !important;
    }

    .table > thead > tr:nth-child(2) .select2-container--bootstrap .select2-selection--single {
        height: 30px !important;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding: 4px 24px 4px 12px;
        font-size: 14px !important;
        font-family: inherit;
    }

    .table > thead > tr:nth-child(2) .form-filter {
        height: 30px !important;
    }

    .table > thead > tr:nth-child(2) .form-control {
        height: 30px !important;
    }

    .table > thead > tr:nth-child(2) .multiselect-native-select .btn {
        padding: 4.4px 12px !important;
    }

        .table > thead > tr:nth-child(2) .multiselect-native-select .btn .caret {
            display: none;
        }

        .table > thead > tr:nth-child(2) .multiselect-native-select .btn:after {
            position: absolute;
            display: inline-block;
            font-size: 8.5px;
            right: 7px;
            top: 7px;
            font-family: FontAwesome;
            height: auto;
            content: "\25BC";
            color: #999999;
        }

    .table > thead > tr:nth-child(2) th input[type=text] {
        font-family: inherit;
        font-weight: 500 !important;
        font-size: 14px !important;
        color: var(--color-lightBlack);
    }

    .table tbody .theme-font, .table tbody .fa-pencil, .table tbody .fa-trash-o {
        color: rgb(18, 113, 196) !important;
    }

    .table > thead > tr:nth-child(2) th input[type=text]::-webkit-input-placeholder {
        font-size: 14px !important;
        font-family: inherit;
        font-weight: 500 !important;
        color: var(--color-tableTh);
    }

    .table > thead > tr:nth-child(2) th input[type=text]::-moz-placeholder {
        font-size: 14px !important;
        font-family: inherit;
        font-weight: 500 !important;
        color: var(--color-tableTh);
    }

    .table > thead > tr:nth-child(2) th input[type=text]:-ms-input-placeholder {
        font-size: 14px !important;
        font-family: inherit;
        font-weight: 500 !important;
        color: var(--color-tableTh);
    }

    .table > thead > tr:nth-child(2) th input[type=text]:-moz-placeholder {
        font-size: 14px !important;
        font-family: inherit;
        font-weight: 500 !important;
    }

    .ctx-table-fixed {
        table-layout: fixed;
    }

    .filter-cancel:hover {
        background-color: #e7505a !important;
        color: var(--color-white) !important;
    }

    .btn.btn-outline.red.active, .btn.btn-outline.red:active, .btn.btn-outline.red:active:focus, .btn.btn-outline.red:active:hover, .btn.btn-outline.red:focus, .btn.btn-outline.red:hover {
        border-color: #e7505a !important;
        color: #e7505a;
        background: 0 0;
        cursor: pointer;
        outline: none;
    }

    .table-responsive {
        margin-bottom: 0.5%;
    }

    .ctx-scrolls, .table-responsive, .ui-widget-content {
        overflow: auto !important;
    }

    .dataTables_wrapper.dataTables_extended_wrapper {
        position: relative;
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: none !important;
        background-color: transparent;
    }

::-webkit-scrollbar-thumb:hover, div#layoutid::-webkit-scrollbar-thumb:hover {
    /*background-color: #757575;*/
    background: gainsboro;
    border-radius: 15px;
}

::-webkit-scrollbar-thumb, .ctx-scroll-Style::-webkit-scrollbar-thumb, .ctx-sidebar-postion::-webkit-scrollbar-thumb, #content::-webkit-scrollbar-thumb, .ctx-scrolls::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .ui-widget-content::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 15px;
}

    .ctx-scroll-Style::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
    }

    .table-responsive::-webkit-scrollbar, .ctx-scrolls::-webkit-scrollbar, #slide-navbar-collapse::-webkit-scrollbar, .ctx-projects::-webkit-scrollbar, .bs-modal-lg .modal-dialog .modal-body::-webkit-scrollbar, .ui-widget-content::-webkit-scrollbar, .ctx-tags-Main::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
    }

    .ctx-scroll-Style:hover::-webkit-scrollbar-thumb, .ctx-sidebar-postion:hover::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb, #content:hover::-webkit-scrollbar-thumb, .ctx-scrolls:hover::-webkit-scrollbar-thumb, .table-responsive:hover::-webkit-scrollbar-thumb, #slide-navbar-collapse:hover::-webkit-scrollbar-thumb, .ctx-projects:hover::-webkit-scrollbar-thumb, .bs-modal-lg .modal-dialog .modal-body:hover::-webkit-scrollbar-thumb, .ui-widget-content:hover::-webkit-scrollbar-thumb, .ctx-tags-Main:hover::-webkit-scrollbar-thumb {
        background-color: gainsboro;
        border-radius: 15px;
    }

    .ctx-scrolls::-webkit-scrollbar-track {
        -webkit-box-shadow: none !important;
        background-color: transparent !important;
    }

    .table:not(.default-dropdown) .btn-group .multiselect.dropdown-toggle.btn.btn-default {
    text-align: left;
    background-color: var(--color-white) !important;
    color: var(--color-lightBlack) !important;
    border: 1px solid #c2cad8 !important;
    border-radius: 0px;
    font-size: 14px;
}

    .table > thead > tr:nth-child(2) .select2-container--bootstrap .select2-selection--single > .select2-selection__rendered, .table > thead > tr:nth-child(2) .multiselect-native-select .multiselect-selected-text {
        color: #c8ced7;
        font-weight: 500;
    }

    .table > tbody td .ctx-open-popup:hover {
        text-decoration: underline;
        color: var(--secondary-color);
        cursor: pointer;
    }

    .filter-class {
        margin-bottom: 7px;
        margin-right: 1px;
    }

    .ctxicon-draggable-margin {
        margin-left: 11px !important;
    }

    .hover-active {
        color: var(--secondary-color) !important;
    }

        .hover-active label {
            text-decoration: underline !important;
            cursor: pointer !important;
        }

        .hover-active a {
            text-decoration: underline !important;
            cursor: pointer !important;
        }

        .hover-active span {
            text-decoration: underline !important;
            cursor: pointer !important;
        }

            .hover-active span a {
                color: inherit !important;
                text-decoration: none !important;
                cursor: default !important;
            }

        .hover-active .active-and-slot span {
            text-decoration: none !important;
            cursor: default !important;
        }

    .ctx-active {
        background-color: rgb(18, 113, 196) !important;
        color: var(--color-white) !important;
    }

    .modal .modal-header a.bg-theme.follow.vote span {
        color: var(--primary-color);
        margin-top: 17px;
        font-size: 10px;
        background: #fff;
        padding: 2px;
        position: absolute;
        margin-left: 9px !important;
        min-width: 29px;
        text-align: center !important;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        top: -30px;
    }

    .modal .modal-header a.bg-theme.follow.vote i, a.bg-theme.mail.pull-right i {
        color: var(--color-white) !important;
    }

    .modal .modal-header a.bg-theme.follow.vote {
        font-size: 25px;
        position: relative;
        margin-top: 0px;
        display: inline-block;
        right: 65px;
    }

        .modal .modal-header a.bg-theme.follow.vote span:before {
            content: '';
            width: 0;
            height: 0;
            border-top: 3px solid transparent;
            border-right: 6px solid white;
            border-bottom: 3px solid transparent;
            left: 0;
            top: 13px;
            position: absolute;
            clear: both;
            transform: rotate(70deg);
        }

    a.bg-theme.follow.looping.pull-right {
        position: relative;
        right: 12px;
    }

        a.bg-theme.follow.looping.pull-right i {
            font-size: 20px;
        }

            a.bg-theme.follow.looping.pull-right i.fa.fa-eye {
                position: relative;
                top: 5px;
            }

            a.bg-theme.follow.looping.pull-right i.ctxicon-loop {
                font-size: 26px;
                position: relative;
                top: -3px;
            }

    a.bg-theme.mail.pull-right {
        position: relative;
        right: 28px;
        text-decoration: none;
        z-index: 2;
    }

        a.bg-theme.mail.pull-right:hover {
            color: var(--color-white);
        }

    [title="Unvote"] i {
        font-size: 33PX !important;
        padding-top: 0 !important;
    }

    [title="Keep out of Loop"] {
        margin-right: 33px;
        top: -8px;
    }

        [title="Keep out of Loop"] i.ctxicon-loop {
            top: 5px !important;
        }

            [title="Keep out of Loop"] i.ctxicon-loop + span {
                top: -21px !important;
                left: 18px;
            }

    [title="Keep in Loop"] {
        margin-right: 19px;
    }

    .ctx-paddingTop-1 {
        padding-top: 1%;
    }

    .ctx-DisplayBlock {
        display: block !important;
    }

    .ctx-DisplayNone {
        display: none !important;
    }

    .ctx-Display-inline {
        display: inline !important;
    }

    .ctx-Display-inineBlock {
        display: inline-block;
    }

    .ctx-Visibility {
        visibility: visible !important;
    }

    .ctx-Hidden {
        visibility: collapse !important;
    }

    .ctx-grid-userinitials {
        padding: 3px;
        color: var(--color-white);
        font-size: 13px;
        font-weight: 500;
        margin-right: 2%;
        width: 24px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
    }

    .ctx-assignee .ctx-grid-userinitials {
        position: relative !important;
        width: 26px !important;
        height: 26px !important;
        display: inline-block;
        font-size: 14px !important;
    }

    .ctx-grid-UserImage {
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0;
    }

    .ctx-heading1 {
        color: var(--primary-color) !important;
        font-size: 20px !important;
        font-weight: 600 !important;
    }

    .ctx-heading2 {
        color: #1d364b !important;
        font-size: 18px !important;
        font-weight: bold !important;
        text-transform: uppercase;
    }

    .ctx-heading3 {
        text-transform: uppercase;
        color: #1d364b;
        font-size: 13px;
        font-weight: 800;
    }

    .ctx-defult-txt {
        font-size: 14px;
    }

    .ctx-aline-text {
        text-align: center;
    }

    .modal {
        -webkit-transition: all 0.75s ease;
        transition: all 0.75s ease;
    }

    .ctx-large-modal .modal-dialog {
        width: 90% !important;
        right: 0;
        position: fixed;
        height: 100%;
        margin-top: 0;
    }

        .ctx-large-modal .modal-dialog .modal-body {
            height: calc(100% - 104px);
            width: 100%;
            margin-top: 0 !important;
            overflow: auto;
        }

    .ctx-large-modal .SideDiv label {
        height: 40px;
    }

    .ctx-large-modal .modal-title label {
        padding-top: 0 !important;
    }

    .ctx-modal-btmRight {
        height: 4000px;
    }

    .ctx-modal-tabs {
    }

    .ctx-modal-btmRight-content {
    }

    .ctx-modal-marginbtm {
        margin-bottom: 1%;
    }

    .ui-widget-content {
        overflow: auto;
    }

        .ui-widget-content .ui-menu-item:hover, .ui-widget-content .ui-menu-item:hover .ui-menu-item-wrapper, .ui-widget-content .ui-menu-item:hover .ui-menu-item-wrapper .ui-state-active {
            background-color: var(--primary-color);
            color: var(--color-white);
        }

    .ui-state-hover, .ui-state-active {
        color: var(--color-white) !important;
        text-decoration: none;
        background: var(--primary-color) !important;
        border-radius: 0px;
        border: 0 !important;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }

    .ctx-backlog-box {
        width: 98%;
        margin: auto;
        padding: 1%;
        margin-bottom: 2%;
    }

        .ctx-backlog-box .breadcrumb {
            background: var(--primary-color);
            color: var(--color-white);
            font-size: 14px;
            text-transform: uppercase;
            text-align: center;
        }

    .ctx-large-modal .modal-content {
        height: 100%;
        overflow-y: hidden;
    }
        .ctx-large-modal .modal-content > form#UserTaskform {
            height: 100%;
        }
    .closeBtn {
        height: 50px;
        width: 50px;
        float: left;
        top: 10%;
        font-size: 25px;
        position: relative;
        border-radius: 50%;
        left: 1%;
        text-align: center;
        background-color: var(--color-white);
        color: var(--primary-color);
        cursor: pointer;
        line-height: 48px;
        font-weight: bold;
    }

        .closeBtn:hover {
            background-color: var(--primary-color);
            color: var(--color-white);
        }

    .ctx-box-none {
        visibility: hidden;
    }

    @media only screen and (max-width:991px) {
        .ctx-tag-label {
            margin-top: 2%;
            margin-bottom: 1%;
        }
    }

    .valid + .field-validation-valid + .glyphicon-warning-sign + .glyphicon-ok {
        display: inline-block;
        margin-top: 10px;
        position: absolute;
    }

    .input-validation-error + .field-validation-error + .glyphicon-warning-sign, .field-validation-error + .glyphicon-warning-sign {
        display: inline-block;
        margin-top: 10px;
        color: red;
        position: absolute;
    }

    .input-validation-error + select2 .select2-selection {
        border: 1px solid red !important;
        background: #ffeeee !important;
    }

    .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
        color: rgb(200, 206, 215);
    }

    .glyphicon-warning-sign + span.glyphicon.glyphicon-ok.form-control-feedback, .field-validation-valid + .glyphicon-warning-sign {
        display: none;
    }

    .modal .modal-header {
        height: 50px !important;
        background: var(--primary-color) !important;
    }

        .modal .modal-header .modal-body {
            height: 50px !important;
            font-size: 14px;
        }


    .tabbable-line > .nav-tabs > li.active > a, .tabbable-line > .nav-tabs > li.active > a > i {
        color: var(--primary-color);
    }

    .modal, .modal input, .modal select, .modal .nav-pills > li > a, .nav-tabs > li > a, .modal .btn {
        font-size: 14px !important;
    }

    .ctx-large-modal .modal-footer {
        bottom: 0;
        position: absolute;
        width: 100%;
        background: var(--color-white);
        border-top: 1px solid #d1d4d8 !important;
        padding-top: 10px !important;
        z-index: 2;
    }

    .ctx-large-modal .tabbable-line > .nav-pills > li > a > .badge, .nav-tabs > li > a > .badge {
        position: absolute;
        top: -5px;
        left: 13px;
        margin-left: 0 !important;
        min-width: 28px;
        text-align: center !important;
    }

        .ctx-large-modal .tabbable-line > .nav-pills > li > a > .badge, .nav-tabs > li > a > .badge:before {
            content: '';
            width: 0;
            height: 0;
            border-top: 3px solid transparent;
            border-right: 6px solid #ed6b75;
            border-bottom: 3px solid transparent;
            right: 7px;
            top: 15px;
            position: absolute;
            clear: both;
            transform: rotate(28deg);
        }

    .ctxicon-code + span + span {
        display: flex;
    }

    .ctx-bkg-parent {
        text-align: left;
        padding: 0;
        width: 100%;
        display: none;
    }

    .ctx-tags-Main {
        height: 34px;
        border: 1px solid #c2cad8;
        padding-right: 1%;
        overflow: hidden;
        padding-left: 0 !important;
    }

        .ctx-tags-Main:hover {
            overflow-x: auto !important;
        }

        .ctx-tags-Main .input-icon {
            max-width: 110000px;
        }

        .ctx-tags-Main .input-icon {
            height: 100%;
            display: flex;
        }

            .ctx-tags-Main .input-icon > span {
                font-size: 13px;
                background: var(--primary-color);
                padding: 4px;
                color: var(--color-white);
                position: relative;
                top: 8%;
                height: 26px;
                white-space: nowrap;
                margin-left: 1%;
                display: flex;
                border-radius: 5px;
            }

            .ctx-tags-Main .input-icon span i {
                margin-left: 9px;
                cursor: pointer;
            }

    .addTags {
        padding: 6.1px;
        left: 14px;
        height: 30px !important;
        width: 30px !important;
        color: #ccc;
        top: 3px;
        margin-right: 10px;
        float: left;
    }

        .addTags i {
            position: relative;
            top: -2px;
        }

    #TagsLable {
        width: 150px;
        height: inherit;
    }

    .ctx-tag-label {
        text-align: right !important;
        padding-top: 7px !important;
    }

    .ctx-tag-labelLeft {
        text-align: left !important;
        padding-top: 7px !important;
    }

    .ctx-assignee {
        display: inline-block;
        height: 34px;
        cursor: pointer;
        width: 100%;
    }

        .ctx-assignee .add {
            padding: 7px;
            vertical-align: super;
            border-left: 1px solid #c2cad8;
            color: var(--primary-color);
            display: none;
            cursor: pointer;
            position: absolute;
            right: 16px;
        }

        .ctx-assignee:hover .add, .ctx-bkg-area:hover .addArea, .ctx-bkg-iteration:hover .additeration, .ctx-bkg-priority:hover .addpriority, .ctx-bkg-dueDate:hover .adddueDate, .ctx-bkg-EstHr:hover .addEstHr, .ctx-bkg-Effort:hover .addEffort, .ctx-bkg-SpentHrs:hover .addSpentHrs, .ctx-bkg-RemaingHrs:hover .addRemaingHrs, .ctx-estimated-time:hover .addEstHr {
            display: initial !important;
        }

        .ctx-assignee:hover, .ctx-bkg-area:hover, .ctx-bkg-iteration:hover, .ctx-bkg-priority:hover, .ctx-bkg-EstHr:hover, .ctx-bkg-dueDate:hover, .ctx-bkg-Effort:hover, .ctx-estimated-time:hover {
            border: 1px solid #c2cad8;
        }

    .ctx-assignee-img {
        vertical-align: sub;
    }

    .ctx-assignee-title {
        position: absolute;
        padding: 7px;
        color: #bcc3ce;
    }

    .ctx-assignee-selection, .ctx-area-selection, .ctx-iteration-selection, .ctx-priority-selection, .ctx-priority-selection, .ctx-RemaingHrs-selection1, .ctx-dueDate-selection, .ctx-bkg-Effort input, .ctx-SpentHrs-selection1, .ctx-estimated-time-selection1 {
        display: none;
    }

    .ctx-assignee-initial {
        margin: 0px;
        margin-top: 3px;
    }

    .ctx-Numbers, .ctx-number-colon {
        border: transparent;
    }

        .ctx-Numbers:hover, .ctx-Numbers:focus {
            border: 1px solid rgb(188, 195, 206);
        }

    .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
        background-color: var(--primary-color) !important;
    }

    .select2-container--bootstrap .select2-selection--single {
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }

    select option {
        color: var(--color-lightBlack);
    }

    .ctx-backlog-parent {
        float: left;
        margin-right: 10px;
        height: 100%;
        color: var(--primary-color);
        padding: 8px;
        top: 0;
        z-index: 4;
        outline: 0;
        background: transparent;
    }

        .ctx-backlog-parent:focus, .ctx-backlog-parent:active {
            outline: 0;
        }

        .ctx-backlog-parent a {
            color: #ccc;
        }

            .ctx-backlog-parent a i {
                vertical-align: super;
            }

        .ctx-backlog-parent:hover a {
            color: var(--color-white);
        }

    .ctx-parentLabel {
        max-width: 94%;
        overflow: hidden;
        padding: 5px;
        border-radius: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-white);
    }

    #parentProductDiv > .col-md-5.ModalPaddings {
        display: flex;
    }

    .ctx-bkg-states ul {
        padding: 8px;
        width: inherit;
        box-shadow: 3px 3px rgba(117,53,0,0.1);
    }

    .ctx-bkg-states .btn-group, .ctx-bkg-states, .ctx-bkg-states a.dropdown-toggle {
        width: 100%;
    }

        .ctx-bkg-states a.dropdown-toggle {
            border-radius: 5px !important;
            text-align: left;
        }

        .ctx-bkg-states a.btn i {
            right: 5px;
            position: absolute;
            top: 10px;
        }

        .ctx-bkg-states ul a {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

    #backlog_AreaId {
        color: var(--color-black) !important;
    }

    .ctx-bkg-priority {
        color: #8c8c8c;
        border-radius: 5px;
    }

    .ctx-bkg-area, .ctx-bkg-iteration, .ctx-bkg-priority, .ctx-bkg-dueDate, .ctx-bkg-EstHr, .ctx-bkg-Effort, .ctx-bkg-SpentHrs, .ctx-bkg-RemaingHrs, .ctx-estimated-time {
        display: inline-flex;
        width: 100%;
        height: 34px;
        cursor: pointer;
    }

    .ctx-bkg-area-title, .ctx-bkg-iteration-title, .ctx-bkg-priority-title, .ctx-bkg-dueDate-title, .ctx-bkg-EstHr-title, .ctx-bkg-Effort-title, .ctx-bkg-SpentHrs-title, .ctx-bkg-RemaingHrs-title, .ctx-bkg-Effort-title {
        padding: 7px;
        position: absolute;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 81%;
        color: #bcc3ce;
    }

    span.ctx-bkg-priority-title span:nth-child(1) {
        margin-left: 21px;
    }

    .ctx-bkg-dueDate-title {
        width: auto;
        height: inherit;
    }

    .ctx-bkg-dueDate > span:nth-child(1) {
        width: 100%;
        height: inherit;
        text-align: left;
    }

    .ctx-bkg-dueDate {
        background: transparent;
    }

    .ctx-bkg-dueDate-invalid {
        border: 1px solid #FF0001 !important;
        background-color: #ffeeee !important;
    }

    .dueDate-validation {
        bottom: -17px;
        position: absolute;
        left: 16px;
        font-size: 14px;
        color: #ff0000;
        display: none;
    }

    .ctx-bkg-dueDate > span:nth-child(2) {
        height: 4px;
        border-radius: 3px;
        width: 0;
        position: relative;
        top: 28px;
        background: transparent;
        padding: 0;
        max-width: 100%;
    }

    .ctx-bkg-priority-title {
        margin: auto;
        width: 80%;
        text-align: left;
    }

    .ctx-bkg-area .addArea, .ctx-bkg-iteration .additeration, .ctx-bkg-iteration-disabled .additeration, .ctx-bkg-priority .addpriority, .ctx-bkg-dueDate .adddueDate, .ctx-bkg-EstHr .addEstHr, .ctx-bkg-Effort .addEffort, .ctx-bkg-SpentHrs .addSpentHrs, .ctx-bkg-RemaingHrs .addRemaingHrs, .ctx-estimated-time .addEstHr {
        border-left: 1px solid #c2cad8;
        color: var(--primary-color);
        right: 16px;
        position: absolute;
        cursor: pointer;
        display: none;
        padding: 7px;
    }

    .additerationExtremeRight {
        right: 0 !important;
    }

    .ctx-bkg-priority .addpriority {
        color: var(--color-black);
        border-left: transparent;
    }

    .ctx-bkg-colors {
        left: 7px;
        position: absolute;
        top: 8.5px;
        height: 15px;
        background-color: #bcc3ce;
        width: 14px;
    }

    .ctx-bkg-Effort .addEffort {
        background-color: var(--primary-color);
        color: var(--color-white);
        right: 0;
    }

    .ctx-large-modal .tabbable-line > .tab-content {
        padding: 5px 0 !important;
    }

    .ctx-large-modal .nav.nav-tabs {
        border: 1px solid #eef1f5;
    }

    .ctx-bkg-SpentHrs + input, .ctx-bkg-RemainingHrs + input {
        display: none;
    }

    .ctx-lable-high {
        background-color: #E7505A;
    }

    .ctx-top-headings {
        background-color: transparent !important;
        color: var(--color-black) !important;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
        font-size: 16px;
        padding: 1.5%;
    }

    .dataTables_length label select {
        color: var(--color-black) !important;
    }

    .ctx-fullheight {
        height: 100%;
    }

    .ctx-fullwidth {
        width: 100%;
    }

    a#RiskSideIcon {
        text-decoration: none;
        font-size: 24px;
        display: inline-block;
    }

    .ctx-information:hover {
        color: var(--color-white) !important;
    }

    .ctx-info-tooltip + .tooltip .tooltip-inner {
        text-align: left !important;
    }

        .ctx-info-tooltip + .tooltip .tooltip-inner b {
            font-size: 14px;
        }

    input#btnShow, input#btnShow1 {
        background-color: #455A64 !important;
        top: 0px;
        position: relative;
        font-size: 12px;
    }

        input#btnShow:hover, input#btnShow1:hover {
            border-color: #455A64 !important;
        }

        input#btnShow + a.btn, input#btnShow1 + a.btn {
            height: 26px;
            width: 26px;
            top: 0px;
            position: relative;
        }

            input#btnShow + a.btn i, input#btnShow1 + a.btn i {
                position: relative;
                left: -2px;
                top: -2px;
            }

    .pftBoard-actionbtn {
        position: relative;
        margin-top: -33px;
    }

    .ctx-no-height {
        height: 0 !important;
    }

    .pft-expand-collapse {
        margin-left: 3px;
    }

    .ctx-margin-right-10 {
        margin-right: 10px;
    }

    .ctx-vertMargin20 {
        margin: 20px 0;
    }

    .ctx-margin-left-5 {
        margin-left: 5px;
    }
    .ctx-margin-left-30 {
        margin-left: 30px;
    }

    .ctx-max-width {
        max-width: 100%;
    }

    label.ctx-label-ellepsis {
        width: 30px;
        color: var(--color-lightBlack);
        padding: 0;
    }

    .homeLoader {
        margin: 0 auto !important;
    }

    div#chartjs-tooltip {
        position: absolute;
    }

    .note-link-popover.popover.bottom.in {
        display: none !important;
    }

    .multiselect-native-select .btn-group button span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: auto;
        max-width: 100%;
        display: inline-block;
    }

    span.multiselect-native-select {
        width: 100%;
    }

        span.multiselect-native-select .btn-group {
            width: 100%;
        }

            span.multiselect-native-select .btn-group button {
                height: 34px !important;
            }

                span.multiselect-native-select .btn-group button.multiselect {
                    width: auto;
                    max-width: 100%;
                }

                    span.multiselect-native-select .btn-group button.multiselect .caret {
                        vertical-align: super;
                    }

    .multiselect-container {
        max-width: 180px;
    }

        .multiselect-container li a {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }

        .multiselect-container > li > a > label > input[type=checkbox], .multiselect-container input[type="radio"] {
            margin-left: 0 !important;
        }

    .ctx-hideBlock {
        display: none;
    }

    .ctx-showBlock {
        display: block;
    }

    .ctx-showinlineBlock {
        display: inline-block;
        width: 100%;
    }

    .ui-menu.ui-widget {
        width: 300px !important;
        height: 300px !important;
    }

        .ui-menu.ui-widget li {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ui-menu.ui-widget:hover {
            overflow-y: scroll;
        }

    .hideMenuList {
        display: none !important;
    }

    .showMenuList {
        display: block !important;
    }

    .ctx-ImageBlock-noData {
        padding-top: 80px;
    }

        .ctx-ImageBlock-noData .col-md-6 {
            margin: 0 auto;
            float: none;
            text-align: center;
        }

        .ctx-ImageBlock-noData .col-md-8 {
            margin: 0 auto;
            float: none;
            text-align: center;
        }

        .ctx-ImageBlock-noData .col-md-6 i {
            font-size: 70px;
            color: #424242;
        }

        .ctx-ImageBlock-noData .row, .ctx-ImageBlock-noData .col-md-6 p {
            text-align: center;
            margin-bottom: 10px;
            margin-top: 10px;
        }

    .ctx-tabs-firstDiv {
    }

    .ctx-upperCaseText {
        font-size: 15px;
        font-weight: 500;
        text-transform: uppercase;
    }

    .ctx-center {
        margin: 0 auto;
        float: none !important;
    }

    select.input-validation-error + span.select2 span.selection span.select2-selection {
        background-color: #ffeeee;
        border-color: red;
    }

    .ctx-left-nopadding {
        padding-left: 0 !important;
    }

    .ctx-right-nopadding {
        padding-right: 0 !important;
    }

    .ctm-left-right-nopad {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .icon > i {
        color: var(--color-dark);
        font-size: 14px;
    }

    .animated.zoomIn, .animated.zoomOut {
        -webkit-animation-duration: 0.3s !important;
        animation-duration: 0.3s !important;
    }

    .ui-resizable-e {
        cursor: e-resize;
        width: 12px;
        right: -5px;
        top: 0;
        height: 100%;
    }

    ul.ui-autocomplete {
        background: #fff;
        border: none;
        box-shadow: 0px 1px 16px -1px #00000024;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ui-menu.ui-widget li {
        padding: 10px 5px;
        margin: 0 !important;
    }

    .ui-widget-content .ui-menu-item:hover, .ui-widget-content .ui-menu-item:hover .ui-menu-item-wrapper {
        background-color: var(--primary-color) !important;
        color: var(--color-white) !important;
        margin: 0 !important;
    }

    ul.ui-widget .ui-menu-item div.ui-menu-item-wrapper {
        background-color: #fff !important;
        color: var(--color-black) !important;
        font-weight: normal;
        margin: 0 !important;
    }

    .ui-menu-item .ui-menu-item-wrapper {
        padding: 2px !important;
        margin: 0 !important;
    }

    .ctx-btn-default-white {
        color: var(--color-black) !important;
        border-color: #c2cad8;
        font-size: 13px !important;
        font-family: inherit;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-left: 4px !important;
        background: transparent;
    }

        .ctx-btn-default-white:hover {
            background-color: var(--primary-color) !important;
            color: var(--color-white) !important;
        }

    .grid-openPopup-Link:hover {
        text-decoration: underline;
        color: var(--secondary-color);
        cursor: pointer;
    }

    .ctx-box-shadow {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        background-color: transparent !important;
    }

    .ctx-usr-noImage {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        border-radius: 50%;
        text-align: center;
        line-height: 2;
        font-size: 58px;
        font-weight: bold;
        color: var(--color-white);
        box-shadow: 0px 0px 11px 1px #1271c4ed;
        -webkit-box-shadow: 0px 0px 11px 1px #1271c4ed;
    }

    .picker.modal-dialog {
        z-index: 500000 !important;
    }

    .picker.modal-dialog-bg {
        z-index: 50000 !important;
        background: var(--color-black) !important;
    }

    div#imgUploader {
        display: flex;
        border: 3px dotted gainsboro;
    }

        div#imgUploader form {
            width: 100%;
        }

        div#imgUploader input {
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: 0;
            position: absolute;
            top: 0;
        }

        div#imgUploader .choosefile {
            display: inline-block;
        }

        div#imgUploader:hover {
            border: 3px dotted #BDBDBD;
            background: #dcdcdc;
        }

        div#imgUploader .choosefile:hover {
            color: var(--color-lightBlack);
            text-decoration: underline;
            font-weight: 600;
            cursor: pointer;
        }

    .wrapper-btn {
        height: 100%;
        text-align: center;
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .file-uploaded {
        padding-top: 40px;
        padding-bottom: 40px;
    }

        .file-uploaded span {
            display: block;
        }

    .ui-autocomplete.ui-widget {
        z-index: 10055;
    }

    .ctx-relative {
        position: relative;
    }

    @media screen and (max-width:767px) {
        .ctx-stickyMenu {
            display: none;
        }
    }

    .ctx-color {
        color: var(--primary-color) !important
    }

    .ctx-firstLevel-Heading {
        color: #1d364b
    }

    .ctx-white-background {
        background-color: #fff
    }

    .ctx-btn-default {
        background-color: var(--primary-color) !important;
        color: var(--color-white) !important
    }

    .ctx-portlet {
        box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)
    }

    li#searchSubMenu > a {
        animation: toolTransition .2s ease-in;
        animation-fill-mode: forwards;
        display: block;
        overflow: hidden;
        padding-top: 44px;
        position: relative;
        width: 52px
    }

    li#searchSubMenu.active #global-menu-search {
        margin-right: 14px;
    }

    .searchInputDiv i.fa {
        color: var(--color-white);
        z-index: 999999;
        position: absolute;
        right: 11px;
        top: 11px;
    }

    .global-menu-search .search-box {
        padding: 0 45px 0 5px;
        width: 300px
    }

    .global-menu-search input {
        border: 0;
        display: block;
        font-size: 14px;
        height: 40px;
        margin: 0
    }

    div#global-menu-search, li.active a#global-menu-search-trigger {
        display: none
    }

    li.active div#global-menu-search {
        position: absolute;
        right: -12px;
        display: block;
        top: -5px;
    }

    #searchSubMenu input.search-box {
        width: 210px;
        border: none;
        border-bottom: 2px solid #fcfcfc !important;
        margin-left: 2px;
    }

    .btn-search-menu {
        position: absolute;
        margin-left: -18px;
        margin-top: -0.1%;
        line-height: 2.8;
    }

    @media only screen and (max-width: 1193px) {
        .ctx-navlist-right.ctx-DisplayNone {
            display: block !important;
        }
    }

    @media only screen and (max-width: 1280px) and (min-width: 1150px) {
        #slide-navbar-collapse > .ctx-navlist-left > li > a {
            padding-right: 12px !important;
            padding-left: 12px !important;
        }
    }

    @media only screen and (max-width: 1150px) and (min-width: 991px) {
        #slide-navbar-collapse > .ctx-navlist-left > li > a {
            padding-right: 7px !important;
            padding-left: 7px !important;
        }
    }

    .autocomplete {
        position: relative;
        display: inline-block;
    }

    .autocomplete-items-search {
        position: absolute;
        border: 1px solid #d4d4d4;
        border-bottom: none;
        border-top: none;
        z-index: 999;
        top: 99%;
        right: 12.6%;
        width: 323px;
    }

        .autocomplete-items-search div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
        }

    .autocomplete-more-search {
        border-bottom: 1px solid #d4d4d4;
    }

    .autocomplete-items-search div:hover {
        background-color: #e9e9e9;
    }

    .autocomplete-active-search {
        background-color: DodgerBlue !important;
        color: var(--color-white);
    }

    .select-list, .outer-search {
        display: inline-block;
    }

    .outer-search {
        position: relative;
        width: 220px;
        overflow: hidden;
    }

        .outer-search input {
            background: #fff;
            padding: 10px;
            width: 100%;
            border: none;
        }

        .outer-search i.fa-search {
            color: #5d607b;
        }

    .search-icon {
        display: inline-block;
        background: #fff;
        padding: 10px;
        float: left;
    }

    .outer-search i.fa-times {
        position: absolute;
        right: 12px;
        z-index: 99999;
        top: 12px;
        cursor: pointer;
    }

    .outer-search input:focus {
        outline: none;
    }

    .search_dropdown_button {
        float: left;
        padding: 10px;
        background: var(--color-dark);
        color: var(--color-white);
        position: relative;
    }

    .dropdown-menu {
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        border: none;
    }

    .ctm-menu-dropdown {
        width: auto;
        padding: 0;
        min-width: 295px;
        z-index: 85;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        display: block;
        z-index: 9999;
        overflow: auto;
        top: 77%;
        display: none;
        max-height: 455px;
    }

        .ctm-menu-dropdown li {
            border-radius: 2px;
            padding: 0;
            cursor: pointer;
            font-size: 13px;
            color: #111315;
        }

    .dropdown-menu > li > a {
        padding: 5px 16px;
    }

    .search_dropdown_button:hover .ctm-menu-dropdown {
        display: block !important;
    }

    .group-heading p {
        margin: 0;
        font-weight: bold;
        padding: 10px 5px;
        color: var(--color-black);
    }

    @media (min-width: 768px) {
        .navbar-right .dropdown-menu {
            right: auto;
            left: 0;
        }
    }

    ul#menu-search-items {
        padding: 0;
        list-style-type: none;
    }

    #accordion > div > div.panel-heading.getModule.active > h4 > span > i {
        color: var(--color-white) !important;
    }

    ul#menu-search-items li a.active {
        color: #000000c4 !important;
    }

    ul#menu-search-items li a:hover {
        background-color: gainsboro;
        color: var(--primary-color) !important;
    }

    #menu-search-items .panel-group {
        margin-bottom: 0 !important;
    }

    #menu-search-items > li > a {
        display: block;
        text-decoration: none;
    }

        #menu-search-items > li > a.selectedTitle {
            color: #000000c4 !important;
        }

    #accordion .panel-body {
        padding: 0 !important;
    }

    div#acceptedRejectedPoliciesSection .panel-body {
        border-top: 0 !important;
    }

    .panel-group.wrap {
        position: absolute;
        z-index: 99999;
        width: 285px;
        left: 0;
        top: 49px;
        display: none;
        max-height: 455px;
        overflow: auto;
    }

    .accordian-block-dropdown {
        display: block !important;
    }

    .search_dropdown_button {
        cursor: pointer;
    }

    .panel {
        border-width: 0 0 0px 0;
        border-style: solid;
        border-color: #fff;
        background: none;
        box-shadow: none;
        transition: all 0.5s;
    }

        .panel:last-child {
            border-bottom: none;
        }

    .panel-group .panel,
    #ManageClassModal #AddLevelBtn {
        border-radius: 0;
    }

        .panel-group .panel + .panel {
            margin-top: 0;
        }

    .panel-heading {
        background-color: #eee;
        border-radius: 0;
        border: none;
        color: var(--color-white);
        padding: 0;
        transition: all 0.5s;
        position: relative !important;
    }

    .panel-title a {
        display: block;
        color: #444;
        padding: 15px;
        position: relative;
        font-size: 16px;
        font-weight: 400;
    }

    .panel-body {
        background: #fff;
    }

    .panel:last-child .panel-body {
        border-radius: 0 0 4px 4px;
    }

    .panel:last-child .panel-heading {
        transition: border-radius 0.3s linear 0.2s;
    }

        .panel:last-child .panel-heading.active {
            border-radius: 0;
            transition: border-radius linear 0s;
        }

    .panel-heading.active a:before {
        content: ' ';
        transition: all 0.5s;
        transform: scale(0);
    }

    #bs-collapse .panel-heading a:after {
        content: ' ';
        font-size: 24px;
        position: absolute;
        font-family: 'Material Icons';
        right: 5px;
        top: 10px;
        transform: scale(0);
        transition: all 0.5s;
    }

    #bs-collapse .panel-heading.active a:after {
        content: '\e909';
        transform: scale(1);
        transition: all 0.5s;
    }

    /*#accordion .panel-body {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-top: 0px solid #eee;
    border-bottom: 1px solid #eee;
}*/

    .taskname {
        float: left;
    }

    #accordion > div > div.panel-heading.getModule > h4 > span > i {
        color: #989696 !important;
    }

    #accordion .panel {
        border-bottom: 1px solid gainsboro !important;
    }

    .dir-icon {
        position: absolute;
        right: 0;
        margin-right: 20px;
        margin-top: 15px;
        color: #444
    }

    .panel-heading.active .taskname {
        color: var(--color-white);
    }

    .panel-heading.active {
        background: #007ac9;
        color: var(--color-white) !important;
    }

        .panel-heading.active .status {
            color: var(--color-white);
        }

    .dir-icon {
        transform: rotate(0deg);
        transition: all 0.5s;
    }

    .panel-heading.active .dir-icon {
        transform: rotate(180deg);
        color: var(--color-white);
    }

    .sub-task > a {
        color: #444;
        text-decoration: none;
    }

    .panel-heading > h4 > a.taskname {
        color: #989696 !important;
        font-weight: 600;
        width: 100%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 45px !important;
    }

    .panel-heading.active > h4 > a.taskname {
        color: var(--color-white) !important;
        font-weight: 600;
    }

    #accordion .panel .panel-title > a:hover {
        text-decoration: none;
        font-weight: 600 !important;
    }

    #menu-search-items > li > a.selectedTitle {
        color: #000000c4;
        padding: 7px 20px;
    }

    /*Column Settings Styles*/
    .columnSetting-dropdown {
        left: -350% !important;
        height: 250px;
        overflow: auto;
        padding: 5px 4px 0;
    }

        .columnSetting-dropdown:before {
            left: 140px !important;
        }

        .columnSetting-dropdown:after {
            left: 140px !important;
        }

    button.btn.ctx-btn-circle.dropdown-toggle {
        background: var(--color-white);
    }

    #addRemoveProductColumns {
        color: var(--color-tableTh);
        font-weight: 600;
        padding: 5px;
        text-align: center;
    }

    .columnSetting-dropdown label {
        display: block;
        margin: 0 !important;
        padding: 4px;
        cursor: pointer;
    }

    .columnSetting-dropdown a {
        padding-left: 5px !important;
        min-width: 100%;
        text-align: left;
        font-family: inherit;
    }

    .columnSetting-dropdown li label:hover {
        color: rgb(18, 113, 196) !important;
        background-color: rgba(211, 211, 211, 0.26);
    }

    .ctm-selectall {
        color: var(--color-black);
        background: #eeeeee;
        padding: 8px;
        padding-left: 16px;
        border-bottom: 1px solid #bdbcbc38;
    }

    .search-div {
        position: relative;
        background: #fff;
        width: 323px;
        box-shadow: 0 0px 12px 0px rgba(0, 0, 0, 0.18);
        z-index: 999999;
        padding: 4.3px 10px;
        padding-right: 0;
    }

        .search-div > input {
            background: transparent;
            border: none;
            padding: 10px;
            padding: 10px 0px;
            border-right: 1px solid #e1e1e1;
            border-left: 1px solid #e1e1e1;
            width: 245px;
            display: inline;
        }

            .search-div > input:focus {
                outline: none;
            }

    .Search-actions {
        display: inline-block;
    }

        .Search-actions > i {
            padding: 10px;
            font-size: 18px;
            color: #8c8a8a;
            transition: all 0.3s;
            border-radius: 3px;
        }

            .Search-actions > i:hover {
                background: #e1e1e1;
                border-radius: 3px;
            }

    .hidesearch {
        padding: 10px;
        font-size: 14px;
        color: #8c8a8a;
        transition: all 0.3s;
        border-radius: 3px;
        cursor: pointer;
    }

        .hidesearch:hover {
            background: #e1e1e1;
            border-radius: 3px;
        }

    .proj-icon {
        margin-right: 15px;
        font-size: 16px;
    }

    .ctx-material-input {
        border-bottom: 1px solid gainsboro !important;
        background: transparent !important;
        outline: 0 !important;
    }

        .ctx-material-input:focus {
            border-bottom: 1.5px solid #1271c4 !important;
        }

            .ctx-material-input:focus + span {
                color: var(--primary-color) !important;
            }

        .ctx-material-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            color: #dcdcdc;
        }

        .ctx-material-input::-moz-placeholder { /* Firefox 19+ */
            color: #dcdcdc;
        }

        .ctx-material-input:-ms-input-placeholder { /* IE 10+ */
            color: #dcdcdc;
        }

        .ctx-material-input:-moz-placeholder { /* Firefox 18- */
            color: #dcdcdc;
        }
    /*to hide clear-all btn when no data in notification*/
    .dropdown-menu li .tab-content .clear-all,
    .ctx-large-modal button.close {
        display: none;
    }

    .sp-hidden {
        display: none;
    }

    table.tbleActionColumn-rmv td:not(.dataTables_empty):last-child, table.tbleActionColumn-rmv th:last-child {
        display: none;
    }

    .tbleActionColumn-rmv > tbody > tr:hover, .tbleActionColumn-rmv > tbody > tr:hover > td {
        background: var(--color-white) !important;
    }

    .tr-hover {
        box-shadow: inset 1px 0 0 #dadce03b, inset 0px 0 0 #dadce040, 0 2px 1px 0 rgba(208, 212, 214, 0.3), 0 1px 1px 1px rgba(129, 133, 136, 0.15);
    }

    .relative {
        position: relative;
    }
    /*Side Panel*/
    .temp-sidepanel-globel {
        width: auto;
        height: 100%;
        position: absolute;
        top: 3px;
        /*transition: .2s;*/
        /*box-shadow: 5px 0px 6px #00000038;*/
        background: #eff3f8;
        z-index: 30;
        min-width: 25px;
    }

        .temp-sidepanel-globel .sidePanel-header {
            color: #1d364b !important;
            font-size: 15px !important;
            font-weight: bold !important;
            text-transform: uppercase;
            min-height: 48px;
            padding: 10px;
        }

        .temp-sidepanel-globel.active {
            left: 0;
        }

            .temp-sidepanel-globel.active + .target-panel {
                margin-left: 300px;
            }

        .temp-sidepanel-globel .panel-close:not(.layer), .temp-sidepanel-globel .panel-open, .expand {
            position: absolute;
            width: 27px;
            height: 27px;
            background: var(--color-white);
            display: block;
            right: -11px;
            box-shadow: 1px 1px 4px #cecece;
            border-radius: 50%;
            border: 2px solid transparent;
            z-index: 2;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(107, 119, 140);
            cursor: pointer;
            top: 8px;
        }
        /*.panel-open {
        position: relative !important;
    }*/
        .temp-sidepanel-globel .panel-close i {
            font-weight: 600;
        }

        .temp-sidepanel-globel .panel-close:hover, .temp-sidepanel-globel .panel-open:hover {
            background: var(--primary-color);
            color: var(--color-white);
        }

        .temp-sidepanel-globel.panel-hide .sidePanel-header, .temp-sidepanel-globel.panel-hide .temp-sidepanel-container {
            display: none;
        }

        .temp-sidepanel-globel.active .sidepanel-parent-container {
            width: 300px;
        }

        .temp-sidepanel-globel.panel-hide #dragbar {
            display: none;
        }

    #dragbar {
        background-color: transparent;
        height: 100%;
        float: right;
        width: 4px;
        cursor: col-resize;
        position: absolute;
        top: 0;
        right: 0;
    }

    div#dragbar:hover, div#dragbar:active {
        background-color: var(--primary-color);
    }

    .sidepanel-parent-container {
        min-width: 25px;
        padding: 15px 0;
        height: 100%;
        max-width: 700px;
    }

    @media only screen and (min-width: 1200px) and (max-width: 1420px) {
        .sidepanel-parent-container {
            max-width: 580px !important;
        }
    }

    .layer {
        position: absolute;
        top: 2px;
        height: 35px;
        width: 35px;
        z-index: 100;
        display: none;
        cursor: pointer;
        right: -16px;
    }


    /*Hover Effect content Left Panel*/
    @media screen and (min-width: 768px) {
        .temp-sidepanel-globel.active.panel-hide .sidepanel-parent-container:hover, .expand:hover + div.sidepanel-parent-container {
            width: 300px !important;
            box-shadow: 5px 0px 6px #00000038 !important;
            transition: all .3s cubic-bezier(.165,.84,.44,1);
        }

            .temp-sidepanel-globel.active.panel-hide .sidepanel-parent-container:hover .layer {
                display: block;
            }

            .temp-sidepanel-globel.active.panel-hide .sidepanel-parent-container:hover .sidePanel-header, .expand:hover + div.sidepanel-parent-container .sidePanel-header, .temp-sidepanel-globel.active.panel-hide .sidepanel-parent-container:hover .temp-sidepanel-container, .expand:hover + div.sidepanel-parent-container .temp-sidepanel-container {
                display: block;
            }
    }


    /*Block UI*/
    .blurIt {
        filter: blur(1px);
        overflow:hidden;
    }

    #Ajaxprogress {
        background: #ffffff7a;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
    }


    .loading-message [align] {
        display: none;
    }

    .loading-message.loading-message-boxed {
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .blockUI.blockMsg.blockElement {
        position: fixed !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
    }

    .ResetFilter-Display {
        display: none;
        border-radius: 50%;
    }

    .mg-right-5px {
        margin-right: 5px;
    }

    .br-rd-2 {
        border-radius: 2px !important;
    }

    .ctx-flexCenter {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flex1 {
        flex: 1;
    }

    .clr-red {
        color: red;
    }

.table:not(.td-elipeses-0) > thead > tr:first-of-type th, .table:not(.td-elipeses-0) > tbody tr td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    max-width: 300px;
    vertical-align: middle;
}

    .table > tfoot > tr > td, .table > tfoot > tr > th {
        vertical-align: super;
    }

    .ActionOnHover .ProjectActionColumn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /*Grid Display Styles*/

    .compact-view tbody tr {
        height: 24px !important;
    }

        .compact-view tbody tr td, .comfortable-view tbody tr td {
            display: table-cell;
            vertical-align: middle;
        }

        .compact-view tbody tr td {
            padding: 0px 11px !important;
        }

            .compact-view tbody tr td label {
                margin: 0 !important;
            }


    .comfortable-view tbody tr {
        max-height: 80px !important;
    }

        .comfortable-view tbody tr td {
            white-space: normal;
            word-break: break-word;
        }



    .rowResizing-dropdown {
        right: 0 !important;
        left: unset !important;
    }

        .rowResizing-dropdown:before, .rowResizing-dropdown:after {
            left: 150px !important;
        }

        .rowResizing-dropdown li label {
            font-weight: 400;
            padding: 7px 17px;
            width: 100%;
            cursor: pointer;
        }

    .comfortable-view tbody tr td label {
        display: block;
    }

    .inherit-width {
        width: inherit !important
    }

    .overflow-hidden {
        overflow: hidden !important
    }
    /*editing ilyas 20-12-2018 global css*/
    /*for background*/
    .bg-white {
        background-color: #fff;
    }
    /*for colors*/
    .clr-red {
        color: red;
    }

    .clr-white {
        color: var(--color-white);
    }
    /*for width 100%*/
    .width-100 {
        width: 100%;
    }

    .width-50 {
        width: 50%;
    }
    .width-30 {
        width: 30% !important;
    }

    .w-30px {
        width: 30px !important;
    }
    /*form height*/
    .height-100% {
        height: 100%;
    }

    .h-inherit {
        height: inherit !important;
    }
    /*for sticky item*/
    .sticky {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 999;
    }

    .border-0 {
        border: 0;
    }

    .cstm-disabled {
        pointer-events: none;
        opacity: 0.7;
    }
    /*for margin*/
    .mg-0 {
        margin: 0;
    }

    .mg-top-0 {
        margin-top: 0;
    }

    .mg-top-3 {
        margin-top: 3px;
    }

    .mg-top-5 {
        margin-top: 5px;
    }

    .mg-top-6 {
        margin-top: 6px;
    }

    .mg-top-7 {
        margin-top: 7px;
    }

    .mg-top-8 {
        margin-top: 8px;
    }

    .mg-top-9 {
        margin-top: 9px;
    }

    .mg-top-10 {
        margin-top: 10px;
    }

    .mg-top-15 {
        margin-top: 15px;
    }

    .mg-top-20 {
        margin-top: 20px;
    }

    .mg-top-30 {
        margin-top: 30px !important;
    }

    .mg-top-35 {
        margin-top: 35px;
    }

    .mg-top-50 {
        margin-top: 50px;
    }

    .mg-btm-0 {
        margin-bottom: 0;
    }

    .mg-btm-5 {
        margin-bottom: 5px;
    }

    .mg-btm-10 {
        margin-bottom: 10px !important;
    }
    .mg-btm-20 {
        margin-bottom: 20px !important;
    }

    .mg-btm-30 {
        margin-bottom: 30px;
    }

    .mg-lft-0 {
        margin-left: 0;
    }

    .mg-lft-5 {
        margin-left: 5px;
    }

    .mg-lft-10 {
        margin-left: 10px;
    }

    .mg-lft-20 {
        margin-left: 20px;
    }

    .mg-rt-10 {
        margin-right: 10px;
    }

    .mg-rt-5 {
        margin-right: 5px;
    }
    /*for padding*/
    .pd-0 {
        padding: 0;
    }

    .pd-btm-15 {
        padding-bottom: 15px;
    }

    .pd-y-15 {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .pd-x-5 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .pd-x-15 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pd-10 {
        padding: 10px;
    }

    .pd-15 {
        padding: 15px;
    }

    .pd-5 {
        padding: 5px;
    }

    .pd-3 {
        padding: 3px;
    }

    .pd-top-0 {
        padding-top: 0;
    }

    .pd-top-5 {
        padding-top: 5px;
    }

    .pd-top-10 {
        padding-top: 10px;
    }

    .pd-top-20 {
        padding-top: 20px;
    }

    .pd-rt-15 {
        padding-right: 15px !important;
    }

    .p-lr-3 {
        padding: 0 3px;
    }

    .pd-rt-20 {
        padding-right: 20px;
    }

    .pd-rt-50 {
        padding-right: 50px;
    }

    .pd-rt-0 {
        padding-right: 0;
    }

    .pd-left-0 {
        padding-left: 0;
    }

    .pd-left-5 {
        padding-left: 5px !important;
    }

    .pd-btm-10 {
        padding-bottom: 10px;
    }
    /*position*/
    .absolute {
        position: absolute;
    }
    /*for display*/
    .none {
        display: none;
    }

    .block {
        display: block;
    }

    .bold {
        font-weight: bold;
    }
    /*for visibility hidden*/
    .v-hide {
        visibility: hidden;
    }
    /*for arrows*/
    .lft-0 {
        left: 0;
    }
    /*display flex properties*/
    .flx-algn-cntr {
        display: flex;
        align-items: center;
    }

    .d-inline-flex {
        display: inline-flex;
    }
    /*to move items to right end*/
    .justify-end {
        display: flex;
        justify-content: flex-end;
    }
    /*for mosue cursor*/
    .crsr-pntr {
        cursor: pointer;
    }

    .crsr-none {
        pointer-events: none;
    }
    /*for text overfllow ellipsis*/
    .ellipsis {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    /*for clearboth hack*/
    .cb {
        clear: both;
    }

    .br-50 {
        border-radius: 50%;
    }

    .bold {
        font-weight: bold;
    }
    /*editing ilyas 20-12-2018 global css ends*/
    /*for sweet overlay backdrop z-index*/
    .sweet-overlay {
        z-index: 9999 !important;
    }



    .dompagination {
        align-items: center;
    }
    /*to center align pagination globly*/
    .dataTables_wrapper .row + div + div.row > div .dataTables_paginate,
    .dataTables_wrapper .row + div + div.row > div .dataTables_length {
        margin-top: 2.6px !important;
    }

        .dataTables_wrapper .row + div + div.row > div .dataTables_length label {
            margin-bottom: 0 !important;
        }

    .dataTables_wrapper .row + div + div.row > div .dataTables_info {
        padding-top: 0 !important;
    }

    /*to center align pagination popups*/
    .dataTables_wrapper .row .dataTables_paginate ul.pagination {
        margin: 0;
    }

    /*to center align empty datatable-empty text*/
    .table-container table tbody tr td.dataTables_empty {
        text-align: center !important;
    }

    /*Notifications CSS*/
    /* li.Notification {
        z-index: 1012;
    }*/

    portlet.portlet-fullscreen {
        z-index: 1013 !important;
    }

    li.Notification.open > a {
        background: transparent !important;
        color: var(--color-white) !important;
    }

    li.Notification ul.dropdown-menu {
        width: 323px;
        left: -268px;
        z-index: 1012;
        overflow: hidden;
        color: var(--color-white);
        background-color: #298be2;
        background: linear-gradient(130deg, #298be2 40%, #1271c4 60%);
    }

        li.Notification ul.dropdown-menu ul.nav + .tab-content {
            height: 270px;
            overflow: auto;
            background: var(--color-white);
            color: var(--color-black);
            padding: 10px;
        }

        li.Notification ul.dropdown-menu ul.nav.nav-tabs li a {
            color: var(--color-black) !important;
        }

    li.Notification:after, li.Notification li:after {
        border-bottom: 0 !important;
    }

    li.Notification span.badge.badge-default {
        position: absolute;
        top: 5px;
        left: 7px;
        background-color: rgb(243, 106, 90);
    }

    h3.notify-title {
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        padding: 19px 0px;
        position: relative;
    }

    li.Notification ul.nav.nav-pills {
        border-bottom: 1px solid gainsboro;
        background: var(--color-white);
        margin: 0;
    }

        li.Notification ul.nav.nav-pills li a {
            border-bottom: 2px solid white;
            color: var(--color-black);
            background-color: transparent;
        }

        li.Notification ul.nav.nav-pills li.active a, li.Notification ul.nav.nav-pills li:hover a {
            border-radius: 0;
            border-bottom-color: #298be2;
        }

    .Notification a.dropdown-toggle span.badge {
        position: absolute;
        top: -3px;
        left: 15px;
        background-color: #f31919;
    }

    a.notification_item, a.notification_item:hover {
        display: flex;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
    }

    a.notification_item {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        margin-bottom: 10px;
    }

    .notify-overly {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 19;
        display: none
    }

    .Notification.open .notify-overly {
        display: block;
    }

    .notify-overly {
        background: #bfbcc278;
    }

    .notification_item-icon {
        display: inline-block;
        width: 35px;
        height: 100%;
    }

    .notification_item-details {
        width: calc(100% - 39px);
    }

    a.notification_item:hover .notification_item-title {
        text-decoration: underline;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .notification_item-icon {
        color: #298be2;
        font-size: 17px;
    }

    .item-center.active {
        display: flex !important;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .ctx-itemCenterFlex {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    a.notification_item.removed-item {
        -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
        -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
        animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    }

    @keyframes removed-item-animation {
        0% {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0)
        }

        30% {
            opacity: 1;
            -webkit-transform: translateX(50px);
            -ms-transform: translateX(50px);
            -o-transform: translateX(50px);
            transform: translateX(50px)
        }

        80% {
            opacity: 1;
            -webkit-transform: translateX(-800px);
            -ms-transform: translateX(-800px);
            -o-transform: translateX(-800px);
            transform: translateX(-800px)
        }

        100% {
            opacity: 0;
            -webkit-transform: translateX(-800px);
            -ms-transform: translateX(-800px);
            -o-transform: translateX(-800px);
            transform: translateX(-800px)
        }
    }

    .badge-num {
        text-align: center;
        display: inline-block;
        box-shadow: 1px 1px 5px rgba(0,0,0, .2);
        animation: pulse 1.5s 1;
    }

        .badge-num:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border: 2px solid rgba(255,0,0,.5);
            opacity: 0;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            animation: sonar 1.5s 1;
        }

    @keyframes sonar {
        0% {
            transform: scale(.9);
            opacity: 1;
        }

        100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        20% {
            transform: scale(1.4);
        }

        50% {
            transform: scale(.9);
        }

        80% {
            transform: scale(1.2);
        }

        100% {
            transform: scale(1);
        }
    }

    .notifier + ul span.badge.badge-danger {
        position: relative;
        /* top: -5px; */
        right: -6px;
        margin-left: 0 !important;
        text-align: center !important;
        background-color: #36c6d3 !important;
        color: var(--color-white) !important;
    }

    span.clear-all {
        position: absolute;
        background: var(--secondary-color);
        padding: 6px;
        font-size: 11px;
        right: 5px;
        border-radius: 10px;
        color: var(--color-white) !important;
        cursor: pointer;
        bottom: 5px;
    }

    .btm-ngt-10 {
        bottom: -6px !important;
    }
    /*to display clear small btn on hover*/
    .dropdown-menu li .tab-content:hover span.clear-all {
        display: block;
    }
    /*for data tables spacing*/
    .profile-content .dataTables_wrapper .table.dataTable {
        margin: 20px 0 !important;
    }

    .portlet.portlet-fullscreen {
        z-index: 1012 !important;
    }
    /*ctxicon-draggable Icon*/
    .ctxicon-draggable {
        color: #92969a;
        display: none;
        cursor: -webkit-grab;
        z-index: 3;
        position: absolute;
    }
    .drag-icon-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .dragable-table tr:hover {
        cursor: -webkit-grab;
    }
    .table tr:hover span.ctxicon-draggable {
        display: inline;
        position: relative;
        top: 4px;
        left: -1px !important;
    }
    /*END*/

    /*JS Tree CSS*/
    .vakata-context {
        z-index: 10052 !important;
    }
    /*JS Tree CSS end*/

    /*Menu Responsive CSS*/
    @media only screen and (max-width: 1075px) {

        #challengeTabContainer .fullScreenInstructions {
            opacity: 1;
        }
    }

    @media only screen and (max-width: 1015px) {
    }


    .panel.panel-default .panel-heading.section_Header {
        padding: 0 !important;
    }

        .panel.panel-default .panel-heading.section_Header .panel-title span.accordion-toggle {
            display: block;
            padding: 10px;
            cursor: pointer;
        }

    /*to remove default bg color from td*/
    table.dataTable td.sorting_1, table.dataTable td.sorting_2, table.dataTable td.sorting_3,
    table.dataTable.order-column tbody tr > .sorting_1,
    table.dataTable.display tbody tr.odd > .sorting_1 {
        background: transparent !important;
    }

    .ctx-btn-fullScreen {
        border-radius: 25px;
        border: 1px solid #ccc;
        width: 30px !important;
        height: 30px !important;
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .ctx-btn-fullScreen:hover, .ctx-btn-fullScreen:focus {
            background-color: rgb(18, 113, 196) !important;
            color: var(--color-white);
            text-decoration: none;
        }

    table.tbleActionColumn-rmv .ActionOnHover .btn.btn-default {
        line-height: 1;
        padding: 4px 6px;
        border-radius: 4px !important;
    }

        table.tbleActionColumn-rmv .ActionOnHover .btn.btn-default i, table.tbleActionColumn-rmv .ActionOnHover .btn.btn-default .caret {
            margin-left: 5px;
        }

    .ctx-tags-Main-hover:hover {
        border: 1px solid rgb(194, 202, 216) !important;
    }

    .manageClass {
        padding: 6.1px;
        left: 14px;
        height: 30px !important;
        width: 30px !important;
        color: #ccc;
        top: 3px;
        margin-right: 10px;
        float: left;
    }

    .ctx-tags-Main .transparentColor {
        background-color: transparent !important;
    }
    /*Upload button Bg-Color*/
    .btn-uploadImg {
        background: #00bcd4 !important;
        color: var(--color-white) !important;
    }

        .btn-uploadImg :hover {
            color: var(--color-white) !important;
            border-color: var(--primary-color);
        }
    /*Add 'ActiveSwitch' class on parent element of the Switch to change th Bg Color */
    .ActiveSwitch .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
        background-color: #009688 !important;
    }

    .activeState .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
        background-color: #009688 !important;
    }

    .table.dataTable {
        overflow: hidden !important;
    }
    /*for filter cancel btn color on focus and hover*/
    .filter-cancel-btn {
        width: 30px;
        height: 30px;
        padding: 0px;
        /* line-height: 27px;*/
    }

    .filter-cancel.ctx-btn-circle:focus {
        background-color: #fff !important;
        color: #e7505a;
    }

    .filter-cancel.ctx-btn-circle:hover {
        background: #e7505a !important;
        color: var(--color-white);
    }

    .appSyncIcon {
        float: right;
        cursor: pointer;
        color: var(--color-dark);
        padding-left: 0;
        padding-right: 30px;
        border-radius: 50%;
        font-size: 21px;
        display: none;
        margin-top: -5px;
        right: 12px;
        position: absolute;
        padding-top: 2px;
    }

    .appSyncCounter {
        position: absolute;
        top: 0;
        background-color: #f31919;
        right: 18px;
    }

    .OverlayCover {
        background: #ffffff7a;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9998;
    }
    /*for site logo width*/
.navbar-default .logoContainer {
    margin: 1.5px 0px;
    max-width: 155px;
}

        .navbar-default .logoContainer img {
            max-width: 100%;
            object-fit: scale-down;
        }

    .default-filters {
        margin-bottom: 15px;
        margin-right: 5px;
    }

    .stdEnabledBtns {
        opacity: 1 !important;
        cursor: pointer !important;
        pointer-events: all !important;
    }

    /*password plugin css*/
    .password-container {
        display: flex !important;
        border: 1px solid #a9a9a9 !important;
        justify-content: space-between !important;
    }

        .password-container input:focus, .password-container input:active {
            outline: none !important;
        }

        .password-container input {
            border: none !important;
        }

        .password-container .password-icon {
            float: right !important;
            margin-top: 10px !important;
            position: relative !important;
            padding-right: 5px !important;
            z-index: 2 !important;
        }

        .password-container input.password-field.form-control {
            border: none !important;
        }

    .passStrengthBar [data-passStrength] {
        width: 100%;
        display: flex;
        align-items: center;
        top: 4px;
        position: relative;
    }

    .passStrengthBar .str-box {
        position: relative;
        width: 100%;
        height: 10px;
        float: left;
        background: #eef1f5;
    }

        .passStrengthBar .str-box div {
            position: absolute;
            width: 0%;
            height: 100%;
            -moz-transition: 1s;
            -o-transition: 1s;
            -webkit-transition: 1s;
            transition: 1s;
        }

    .passStrengthBar {
        display: none;
    }

        .passStrengthBar .weak {
            color: #dc3545;
        }

            .passStrengthBar .weak .str-box.box1 div {
                background: #dc3545;
                width: 25%;
            }

        .passStrengthBar .fair {
            color: #ffc107;
        }

            .passStrengthBar .fair .str-box.box1 div {
                background: #ffc107;
                width: 50%;
            }

        .passStrengthBar .good {
            color: #007bff;
        }

            .passStrengthBar .good .str-box.box1 div {
                background: #007bff;
                width: 75%;
            }

        .passStrengthBar .strong {
            color: #28a745;
        }

            .passStrengthBar .strong .str-box.box1 div {
                background: #28a745;
                width: 100%;
            }

    .password-container .hidddenPassword {
        position: absolute;
        width: 0;
        padding: 0;
    }

    .passStrengthBar .result {
        font-weight: 600;
        margin-left: 9px;
        width: auto;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }

    .password-container input.password-field {
        padding-right: 115px;
    }

    .password-container .passInput-icons {
        display: flex;
        position: absolute;
        right: 0;
        height: 100%;
    }

    .arabic_lang .password-container .passInput-icons {
        left: 0 !important;
        right: unset;
    }

    /*password plugin css*/

    .iti.iti--allow-dropdown {
        width: 100%;
    }

    input:focus, .btn:focus {
        outline: none;
    }

    a.btn.red.filter-cancel {
        width: 30px !important;
        height: 30px !important;
        padding-right: 0;
        padding-left: 0;
    }


    .swal-input-span {
        font-size: 16px;
        color: #34495e;
    }
    /* Am chart stying*/
    #reportStudentsComparison {
        position: relative;
        padding-top: 53px !important;
    }
    .amcharts-export-menu-top-right {
        top: -60px !important;
        right: -7px !important;
    }
    #ChartLoader {
        color: #c5c5c5;
        font-size: 18px;
    }

        #ChartLoader span {
            display: block;
            position: absolute;
            top: 50%;
            width: 100%;
            text-align: center;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    /*color-profile picture preview modal start*/



    .profile-userpic > img, .profile-staffpic > img {
        cursor: pointer;
    }

    #profileImgModal #profileModalImg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #profileImgModal .modalContent {
        display: flex;
        align-items: center;
        height: 100%;
    }

    #profileImgModal .inner-content {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
        height: 500px;
        position: relative;
    }

    #profileImgModal .modalContent .closeBtnWrap {
        position: absolute;
        right: 2px;
        top: 2px;
        z-index: 2;
        display: inline-block;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        border-radius: 50px;
        font-size: 27px;
        cursor: pointer;
    }
    /*color-profile picture preview modal end*/
    .ContactTemplateTable .toggle_fieldset label {
        padding-top: 0;
    }

    @media only screen and (max-width: 425px) {
        ul.dropdown-menu.stdGrid_dropdown, ul.StdSub_menu.dropdown-menu {
            min-width: 100px !important;
            width: auto;
        }
            ul.dropdown-menu.stdGrid_dropdown li a, ul.StdSub_menu.dropdown-menu li a {
                font-size: 12px;
                line-height:1.5;
            }
    }

/* Mega menu style changes like V3 app */
.ctx-proj-menu{
    padding:2rem;
}
    .ctx-proj-menu .ctx-proj-col {
        padding: 0.75rem;
        border:0;
    }
.megamenu-dropdown-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.megamenu-icon-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50px;
    background: rgb(18, 113, 196);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:13px;
}
.megamenu-dropdown-header-title h4 {
    font-size: 15.25px;
    line-height: 16.7px;
    color: #222222;
    font-weight: bold;
    margin: 0;
}
.megamenu-subtitle-label {
    margin: 0;
    font-size: 12px;
}
.megamenu_student_board_item {
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
    .megamenu_student_board_item .filter-cancel {
        font-size: 16px;
        width: 33px;
        min-width: 33px;
        height: 34px;
        color: #333333 !important;
        background: #ffffff !important;
        border-radius: 50px;
        padding: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .megamenu_student_board_item .FilterTypeDDlDiv .select, .megamenu_student_board_item .active-in-active-dd .select {
        border-radius: 6px !important;
        border-color: #D0D5DD !important;
        appearance: none;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000000" width="150" height="150" viewBox="-8.5 0 32 32" version="1.1"><title>angle-down</title><path d="M7.28 20.040c-0.24 0-0.44-0.080-0.6-0.24l-6.44-6.44c-0.32-0.32-0.32-0.84 0-1.2 0.32-0.32 0.84-0.32 1.2 0l5.84 5.84 5.84-5.84c0.32-0.32 0.84-0.32 1.2 0 0.32 0.32 0.32 0.84 0 1.2l-6.44 6.44c-0.16 0.16-0.4 0.24-0.6 0.24z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 0.7rem top 50%;
        background-size: 2.5rem auto;
    }
    .megamenu_student_board_item .FilterTypeDDlDiv, .megamenu_student_board_item .active-in-active-dd {
        flex: 1;
    }
.mega-menu-board-items-list-wrapper {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
    .mega-menu-board-items-list-wrapper .mega-menu-board-items-filter-input{
        padding:7px;
    }
        .mega-menu-board-items-list-wrapper .mega-menu-board-items-filter-input input {
            border: 1px solid #cbd5e1 !important;
            box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
            border-radius: 6px !important;
        }
    .mega-menu-board-items-list-wrapper .mega-menu-board-items-lists {
        margin: 0;
        padding: 0;
        max-height:160px;
        height:160px;
    }
        .mega-menu-board-items-list-wrapper .mega-menu-board-items-lists .ctx-nav-list {
            margin-left: 0 !important;
        }
        .mega-menu-board-items-list-wrapper .mega-menu-board-items-lists .ctx-nav-list::after {
            display:none !important;
        }
        .mega-menu-board-items-list-wrapper .mega-menu-board-items-lists .ctx-nav-list a {
            display:block;
        }

/* Nav menu right section help dropdown css */
.clm-help-dropdown-menu #know-base-div {
    padding: 1rem 0;
}
.clm-help-dropdown-menu #know-base-div .ctx-nav-list {
    border-radius: 0;
    border: 0 !important;
}
    .clm-help-dropdown-menu #know-base-div .ctx-nav-list::after {
        display:none;
    }
.clm-help-dropdown-menu #know-base-div .ctx-nav-list .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
    .clm-help-dropdown-menu #know-base-div .ctx-nav-list .nav-link .knowledge-base-icon-placeholder {
        width: 37px;
        height: 37px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 1rem;
        background: #ffffff;
        border-radius: 8px;
        color: #1271c4;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        flex: 0 0 auto;
        font-size: 18px;
        box-shadow: 0px 1px 10px -3px gainsboro;
        margin-left: 1rem;
    }
    .clm-help-dropdown-menu #know-base-div .ctx-nav-list .nav-link .knowledge-base-item-description {
        word-break: break-word;
        text-wrap: wrap;
    }
        .clm-help-dropdown-menu #know-base-div .ctx-nav-list .nav-link .knowledge-base-item-description h5 {
            margin: 0 0 5px 0;
            font-weight: 700;
            font-size: 13px;
        }
        .clm-help-dropdown-menu #know-base-div .ctx-nav-list .nav-link .knowledge-base-item-description p {
            margin: 0;
            color: #94a3b8
        }

.notification-dropodown-menu {
    width: 420px !important;
    left: -305px !important;
    border-radius: 8px !important;
}
    .notification-dropodown-menu .notify-title {
        margin: 0;
        padding: 14px 0px;
    }
    .notification-dropodown-menu ul.nav li a {
        border-bottom: 0 !important;
        padding: 17px 27px 17px 27px !important;
        padding-left:27px !important;
        padding-right:27px !important;
        color: #919191 !important;
        transition:all 0.3s ease-in-out;
    }
    .notification-dropodown-menu ul.nav li.active a {
        color: #1271c4 !important;
        font-weight: 600;
        position: relative;
        transition: all 0.3s ease-in-out;
    }
        .notification-dropodown-menu ul.nav li.active a::before {
            content: '';
            position: absolute;
            bottom: 0;
            width: 80%;
            height: 3px;
            background-color: #1271c4;
            left: 0;
            right: 0;
            margin: auto;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }
    .notification-dropodown-menu ul.nav li a:hover {
        background-color: #f1f1f1 !important;
    }